import { ClockIcon } from "lucide-react";

import { exceptionQueue } from "@/entities/site-content";
import { severityTone } from "@/shared/lib/ops-tone";
import { Badge } from "@/shared/ui/badge";
import { Separator } from "@/shared/ui/separator";
import { Panel } from "@/shared/ui/panel";

export function ExceptionBoard() {
  return (
    <Panel className="p-4">
      <div className="mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <h2 className="font-display text-2xl font-semibold">Exception queue</h2>
          <p className="mt-1 text-sm text-muted-foreground">Каждое исключение имеет owner, timer и следующее действие.</p>
        </div>
        <Badge variant="outline" className="w-fit rounded-md border-rose-200 bg-rose-50 text-rose-700">
          no fire-and-forget handoff
        </Badge>
      </div>
      <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
        {exceptionQueue.map((item) => (
          <article key={item.title} className="rounded-md border border-border bg-background p-4">
            <div className="mb-5 flex items-center justify-between gap-3">
              <Badge variant="outline" className={`rounded-md ${severityTone[item.severity]}`}>
                {item.severity}
              </Badge>
              <span className="flex items-center gap-1 text-xs text-muted-foreground">
                <ClockIcon className="size-3.5" />
                {item.time}
              </span>
            </div>
            <h3 className="font-semibold leading-tight">{item.title}</h3>
            <p className="mt-2 text-sm text-muted-foreground">{item.owner}</p>
            <Separator className="my-4" />
            <p className="text-sm leading-6">{item.action}</p>
          </article>
        ))}
      </div>
    </Panel>
  );
}