import { CaseCard } from "@/components/cards/CaseCard";
import { CardLink } from "@/components/common/CardLink";
import { CreateCase } from "@/components/common/CreateCase";
import { fetchOpenCases } from "@/lib/db";
import { PizzaIcon } from "lucide-react";

export default async function Reports() {
  const cases = (await fetchOpenCases()).reverse();

  return (
    <div className="flex flex-col gap-8">
      <div className="flex flex-col gap-2">
        <div className="flex flex-row gap-2 items-center">
          <CreateCase />
          <h1 className="text-2xl">Open Cases</h1>
        </div>

        {cases.length ? (
          cases.map((entry) => (
            <CardLink key={entry._id} href={`/panel/cases/${entry._id}`}>
              <CaseCard entry={entry} />
            </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 cases currently open.
            </h3>
          </>
        )}
      </div>
    </div>
  );
}
