import { ReportCard } from "@/components/cards/ReportCard";
import { CardLink } from "@/components/common/CardLink";
import { Input } from "@/components/ui/input";
import { fetchReports } from "@/lib/db";

export default async function Reports() {
  const reports = (await fetchReports())
    .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.map((report) => (
        <CardLink key={report._id} href={`/panel/reports/${report._id}`}>
          <ReportCard report={report} />
        </CardLink>
      ))}
    </div>
  );
}