src/components/forms/GeneratePanel.tsx

import { Sparkles } from "lucide-react";
import { DocumentSelect } from "@/components/forms/DocumentSelect";
import { EmptyState } from "@/components/states/EmptyState";
import { ErrorState } from "@/components/states/ErrorState";
import { LoadingSpinner } from "@/components/states/LoadingSpinner";
import type { ApiDocument } from "@/lib/api/types";
import Link from "next/link";

type GeneratePanelProps = {
  documents: ApiDocument[];
  selectedDocumentId: string;
  onDocumentChange: (documentId: string) => void;
  isLoadingDocuments: boolean;
  documentError: string | null;
  isGenerating: boolean;
  buttonLabel: string;
  onGenerate: () => void;
};

export function GeneratePanel({
  documents,
  selectedDocumentId,
  onDocumentChange,
  isLoadingDocuments,
  documentError,
  isGenerating,
  buttonLabel,
  onGenerate,
}: GeneratePanelProps) {
  if (isLoadingDocuments) return <LoadingSpinner label="Loading your study sources\u2026" />;
  if (documentError) return <ErrorState title="Could not load sources" message="We couldn't reach your study sources. Try again or add new notes." action={<Link href="/upload" className="btn-primary !h-9 !text-[13px]">Add source</Link>} />;
  if (documents.length === 0) return <EmptyState title="No sources yet" description="Add notes or question papers to generate study outputs." action={<Link href="/upload" className="btn-primary !h-9 !text-[13px]">Add source</Link>} />;

  return (
    <section className="grid gap-3 lg:grid-cols-[1fr_200px]">
      <DocumentSelect documents={documents} selectedDocumentId={selectedDocumentId} onChange={onDocumentChange} />
      <button
        type="button"
        onClick={onGenerate}
        disabled={isGenerating || !selectedDocumentId}
        className="btn-primary !h-full min-h-[72px] disabled:cursor-not-allowed disabled:opacity-40"
      >
        {isGenerating ? (
          <span className="size-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
        ) : (
          <Sparkles className="size-4" />
        )}
        {isGenerating ? "Generating" : buttonLabel}
      </button>
    </section>
  );
}