import { ChatCircleIcon } from "@octanejs/phosphor-icons";
import { Link } from "@octanejs/tanstack-router";
import { Empty } from "octane-kumo/components/empty";
import { useShellSession } from "../runtime/shell-session";

export function Home() {
  const { conversations, status } = useShellSession();
  return (
    <main className="content overview-page">
      <div className="page-intro">
        <h1>Conversations</h1>
      </div>
      {status === "connected" && conversations.length ? (
        <ul className="conversation-list" aria-label="Saved conversations">
          {conversations.map((item) => (
            <li key={item.id}>
              <Link
                to="/conversations/$id"
                params={{ id: item.id }}
                title={item.name}
              >
                <span>{item.name}</span>
              </Link>
            </li>
          ))}
        </ul>
      ) : (
        <Empty
          size="sm"
          icon={<ChatCircleIcon size={32} />}
          title="No conversations yet"
          description={
            status === "connected"
              ? "Start a new conversation from the sidebar."
              : "Connect to your personal Flarebot to see your saved conversations."
          }
        />
      )}
    </main>
  );
}