"use client";

import { AiAgentCard } from "@/features/ai/components/ai-agent-card";
import { AiPageHeader } from "@/features/ai/components/ai-page-header";
import { aiDict } from "@/features/ai/dict";
import { useAiAgents } from "@/features/ai/hooks/use-ai";
import { panelDict } from "@/features/panel/dict";

export function AiAgentsPageContent() {
  const { data: agents = [], isLoading } = useAiAgents();

  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.title} backHref="/panel" showHistory />

      <p className="px-1 text-sm leading-7 text-muted-foreground">
        {aiDict.subtitle}
      </p>

      {isLoading ? (
        <p className="px-1 text-sm text-muted-foreground">{panelDict.loading}</p>
      ) : agents.length === 0 ? (
        <p className="px-1 text-sm text-muted-foreground">{aiDict.noAgents}</p>
      ) : (
        <div className="flex flex-col gap-4">
          {agents.map((agent) => (
            <AiAgentCard key={agent.id} agent={agent} />
          ))}
        </div>
      )}
    </div>
  );
}