"use client";

import { useQuery } from "@tanstack/react-query";
import { useParams } from "next/navigation";
import { api } from "@/lib/api";
import type { Document } from "@/lib/types";
import { DocumentList } from "@/components/documents/DocumentList";
import { DocumentUpload } from "@/components/documents/DocumentUpload";
import { Loader2 } from "lucide-react";

export default function DokumentePage() {
  const { id } = useParams<{ id: string }>();

  const { data, isLoading } = useQuery({
    queryKey: ["case-documents", id],
    queryFn: () => api.get<Document[]>(`/cases/${id}/documents`),
  });

  if (isLoading) {
    return (
      <div className="flex items-center justify-center py-8">
        <Loader2 className="h-5 w-5 animate-spin text-neutral-400" />
      </div>
    );
  }

  const documents = Array.isArray(data) ? data : [];

  return (
    <div className="space-y-6">
      <DocumentUpload caseId={id} />
      <DocumentList documents={documents} caseId={id} />
    </div>
  );
}