import Link from "next/link";
import { Report } from "revolt-api";
import { Card, CardDescription, CardHeader, CardTitle } from "../ui/card";
import { Badge } from "../ui/badge";
import dayjs from "dayjs";
import { decodeTime } from "ulid";

import relativeTime from "dayjs/plugin/relativeTime";
dayjs.extend(relativeTime);

export function ReportCard({ report }: { report: Report }) {
  return (
    <Link href={`/panel/reports/${report._id}`}>
      <Card className="transition-all hover:-translate-y-1 hover:shadow-md">
        <CardHeader>
          <CardTitle
            className={`overflow-ellipsis whitespace-nowrap overflow-x-clip ${
              report.status !== "Created" ? "text-gray-500" : ""
            }`}
          >
            {report.content.report_reason.includes("Illegal") && (
              <Badge className="align-middle" variant="destructive">
                Urgent
              </Badge>
            )}{" "}
            {report.additional_context || "No reason specified"}
          </CardTitle>
          <CardDescription>
            {report._id.toString().substring(20, 26)} &middot;{" "}
            {report.content.report_reason} &middot; {report.content.type}{" "}
            &middot; {dayjs(decodeTime(report._id)).fromNow()}
          </CardDescription>
        </CardHeader>
      </Card>
    </Link>
  );
}