import { ReportCard } from "@/components/cards/ReportCard";
import { CardLink } from "@/components/common/CardLink";
import { NavigationToolbar } from "@/components/common/NavigationToolbar";
import { CaseActions } from "@/components/pages/inspector/CaseActions";
import { fetchCaseById, fetchReportsByCase } from "@/lib/db";
import { PizzaIcon } from "lucide-react";
import { notFound } from "next/navigation";

export default async function Reports({ params }: { params: { id: string } }) {
  const Case = await fetchCaseById(params.id);
  if (!Case) return notFound();

  const reports = await fetchReportsByCase(params.id);

  return (
    <div className="flex flex-col gap-2">
      <NavigationToolbar>Viewing Case</NavigationToolbar>
      <CaseActions Case={Case} />

      <div className="flex flex-col gap-2">
        <h1 className="text-2xl">Reports</h1>
        {reports.length ? (
          reports.map((report) => (
            <CardLink key={report._id} href={`/panel/reports/${report._id}`}>
              <ReportCard report={report} />
            </CardLink>
          ))
        ) : (
          <>
            <h2 className="mt-8 flex justify-center">
              <PizzaIcon className="text-gray-400" />
            </h2>
            <h3 className="text-xs text-center pb-2 text-gray-400">
              No reports added yet.
            </h3>
          </>
        )}
      </div>
    </div>
  );
}
