import { ReportCard } from "@/components/cards/ReportCard";
import { CardLink } from "@/components/common/CardLink";
import { Input } from "@/components/ui/input";
import { fetchOpenReports } from "@/lib/db";
import { PizzaIcon } from "lucide-react";

export default async function Reports() {
  const reports = (await fetchOpenReports())
    .reverse()
    .sort((b, _) => (b.content.report_reason.includes("Illegal") ? -1 : 0));

  return (
    <div className="flex flex-col gap-2">
      <Input placeholder="Search for reports..." disabled />
      {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">
          You&lsquo;ve caught up for now.
        </h3>
      </>)
      }
    </div>
  );
}
