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

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