"use client";

import { Report } from "revolt-api";
import { ListCompactor } from "../common/ListCompactor";
import { ReportCard } from "../cards/ReportCard";
import { CardLink } from "../common/CardLink";

export function RelevantReports({
  byUser,
  forUser,
}: {
  byUser: Report[];
  forUser: Report[];
}) {
  return (
    <div className="flex gap-2">
      <div className="flex-1 min-w-0 flex flex-col gap-2">
        <h2 className="text-md text-center pb-2">Created Reports</h2>
        <ListCompactor
          data={byUser}
          Component={({ item }) => (
            <CardLink href={`/panel/reports/${item._id}`}>
              <ReportCard report={item} />
            </CardLink>
          )}
        />
      </div>
      <div className="flex-1 min-w-0 flex flex-col gap-2">
        <h2 className="text-md text-center pb-2">Reports Against User</h2>
        <ListCompactor
          data={forUser}
          Component={({ item }) => (
            <CardLink href={`/panel/reports/${item._id}`}>
              <ReportCard report={item} />
            </CardLink>
          )}
        />
      </div>
    </div>
  );
}