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";
import { CaseDocument } from "@/lib/db";
dayjs.extend(relativeTime);

export function CaseCard({ entry: entry }: { entry: CaseDocument }) {
  return (
    <Card>
      <CardHeader>
        <CardTitle
          className={`overflow-ellipsis whitespace-nowrap overflow-x-clip ${
            entry.status !== "Open" ? "text-gray-500" : ""
          }`}
        >
          {entry.title || "No reason specified"}
        </CardTitle>
        <CardDescription>
          {entry._id.toString().substring(20, 26)} &middot;{" "}
          {dayjs(decodeTime(entry._id)).fromNow()} &middot; {entry.author}{" "}
          {entry.status !== "Open" && entry.closed_at && (
            <>&middot; Closed {dayjs(entry.closed_at).fromNow()}</>
          )}
        </CardDescription>
      </CardHeader>
    </Card>
  );
}