"use client";

import { AiConversationListItem } from "@/features/ai/components/ai-conversation-list-item";
import { AiPageHeader } from "@/features/ai/components/ai-page-header";
import { aiDict } from "@/features/ai/dict";
import { useAiConversations } from "@/features/ai/hooks/use-ai";
import { panelDict } from "@/features/panel/dict";

export function AiHistoryPageContent() {
  const { data: conversations = [], isLoading } = useAiConversations();

  return (
    <div className="mx-auto flex w-full max-w-3xl flex-1 flex-col gap-4 px-4 py-4 sm:gap-5 sm:px-6 sm:py-6">
      <AiPageHeader title={aiDict.historyTitle} backHref="/panel/ai" />

      {isLoading ? (
        <p className="px-1 text-sm text-muted-foreground">{panelDict.loading}</p>
      ) : conversations.length === 0 ? (
        <p className="px-1 text-sm text-muted-foreground">
          {aiDict.noConversations}
        </p>
      ) : (
        <div className="flex flex-col gap-3">
          {conversations.map((conversation) => (
            <AiConversationListItem
              key={conversation.id}
              conversation={conversation}
            />
          ))}
        </div>
      )}
    </div>
  );
}