Artifacts

import { cn } from "@/lib/utils";
import type { Priority, Status } from "@/lib/content/types";

const STATUS_STYLES: Record<Status, { dot: string; text: string; bg: string }> = {
  Active: { dot: "bg-emerald-500", text: "text-emerald-700", bg: "bg-emerald-50" },
  "In Progress": { dot: "bg-blue-500", text: "text-blue-700", bg: "bg-blue-50" },
  Review: { dot: "bg-violet-500", text: "text-violet-700", bg: "bg-violet-50" },
  Blocked: { dot: "bg-red-500", text: "text-red-700", bg: "bg-red-50" },
  Backlog: { dot: "bg-slate-400", text: "text-slate-600", bg: "bg-slate-100" },
  Draft: { dot: "bg-slate-400", text: "text-slate-600", bg: "bg-slate-100" },
  Done: { dot: "bg-teal-500", text: "text-teal-700", bg: "bg-teal-50" },
  Complete: { dot: "bg-teal-500", text: "text-teal-700", bg: "bg-teal-50" },
  Closed: { dot: "bg-slate-400", text: "text-slate-500", bg: "bg-slate-100" },
  Unknown: { dot: "bg-slate-300", text: "text-slate-500", bg: "bg-slate-100" },
};

export function StatusBadge({ status, className }: { status: Status; className?: string }) {
  const s = STATUS_STYLES[status] ?? STATUS_STYLES.Unknown;
  return (
    <span
      className={cn(
        "inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium",
        s.bg,
        s.text,
        className,
      )}
    >
      <span className={cn("h-1.5 w-1.5 rounded-full", s.dot)} />
      {status}
    </span>
  );
}

const PRIORITY_STYLES: Record<Priority, string> = {
  P0: "bg-red-50 text-red-700",
  P1: "bg-amber-50 text-amber-700",
  P2: "bg-blue-50 text-blue-700",
  P3: "bg-slate-100 text-slate-600",
  Unknown: "bg-slate-100 text-slate-500",
};

export function PriorityBadge({ priority, className }: { priority: Priority; className?: string }) {
  if (priority === "Unknown") return null;
  return (
    <span
      className={cn(
        "inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold tracking-tight",
        PRIORITY_STYLES[priority],
        className,
      )}
    >
      {priority}
    </span>
  );
}