Compact WIP board

import { Avatar, AvatarFallback, Badge, Button } from "@cronus-ui/ui";
import { Plus } from "lucide-react";

interface CompactTask {
  code: string;
  title: string;
  tag: string;
  tagVariant: "info" | "success" | "warning" | "destructive" | "secondary";
  assignee: string;
  assigneeName: string;
}

interface CompactColumn {
  id: string;
  name: string;
  wipLimit: number;
  tasks: CompactTask[];
}

const compactColumns: CompactColumn[] = [
  {
    id: "todo",
    name: "Todo",
    wipLimit: 6,
    tasks: [
      { code: "MER-201", title: "Improve webhook retry backoff", tag: "Backend", tagVariant: "info", assignee: "DL", assigneeName: "Devon Lane" },
      { code: "MER-198", title: "CSV import for the contacts page", tag: "Frontend", tagVariant: "info", assignee: "HY", assigneeName: "Hana Yoshida" },
      { code: "MER-195", title: "Refresh empty-state illustrations", tag: "Design", tagVariant: "secondary", assignee: "RD", assigneeName: "Rosa Delgado" },
      { code: "MER-190", title: "Tighten password policy defaults", tag: "Security", tagVariant: "warning", assignee: "MC", assigneeName: "Marcus Chen" },
    ],
  },
  {
    id: "in-progress",
    name: "In progress",
    wipLimit: 4,
    tasks: [
      { code: "MER-188", title: "Usage-based billing alerts", tag: "Billing", tagVariant: "success", assignee: "IS", assigneeName: "Ingrid Solberg" },
      { code: "MER-186", title: "Fix timezone drift in scheduled reports", tag: "Bug", tagVariant: "destructive", assignee: "MC", assigneeName: "Marcus Chen" },
      { code: "MER-183", title: "Move search to a typo-tolerant index", tag: "Backend", tagVariant: "info", assignee: "DL", assigneeName: "Devon Lane" },
      { code: "MER-181", title: "Keyboard navigation for the command menu", tag: "Frontend", tagVariant: "info", assignee: "FW", assigneeName: "Felix Weber" },
    ],
  },
  {
    id: "in-review",
    name: "In review",
    wipLimit: 3,
    tasks: [
      { code: "MER-179", title: "Role-based access for API tokens", tag: "Security", tagVariant: "warning", assignee: "AD", assigneeName: "Amara Diallo" },
      { code: "MER-176", title: "Consolidate transactional email templates", tag: "Backend", tagVariant: "info", assignee: "RD", assigneeName: "Rosa Delgado" },
    ],
  },
];

export function KanbanBoardCompactBlock() {
  return (
    <section aria-label="Team board" className="mx-auto flex w-full max-w-6xl flex-col gap-4">
      <header className="flex flex-wrap items-center justify-between gap-3">
        <div className="flex flex-col gap-1">
          <h2 className="font-display text-lg font-semibold text-fg">Platform team · Week 29</h2>
          <p className="text-sm text-fg-secondary">10 tasks in flight · WIP limits enforced</p>
        </div>
        <Button variant="outline" size="sm">
          <Plus className="size-4" aria-hidden="true" />
          Add task
        </Button>
      </header>

      <div className="grid gap-4 lg:grid-cols-3">
        {compactColumns.map((column) => (
          <div key={column.id} className="flex flex-col gap-3 rounded-2xl bg-surface-inset p-3">
            <div className="flex items-center gap-2 px-1">
              <h3 className="text-sm font-semibold text-fg">{column.name}</h3>
              <span className="text-xs font-medium tabular-nums text-fg-tertiary">
                {column.tasks.length}/{column.wipLimit}
              </span>
              {column.tasks.length >= column.wipLimit ? (
                <Badge variant="warning">At WIP limit</Badge>
              ) : null}
              <Button variant="ghost" size="icon-sm" className="ms-auto">
                <Plus className="size-4" aria-hidden="true" />
                <span className="sr-only">Add task to {column.name}</span>
              </Button>
            </div>
            <ul className="flex flex-col gap-2">
              {column.tasks.map((task) => (
                <li
                  key={task.code}
                  className="flex items-center gap-3 rounded-lg border border-border bg-surface-raised px-3 py-2 shadow-xs"
                >
                  <span className="shrink-0 font-mono text-xs text-fg-tertiary">{task.code}</span>
                  <p className="min-w-0 flex-1 truncate text-sm text-fg">{task.title}</p>
                  <Badge variant={task.tagVariant} className="hidden sm:inline-flex">
                    {task.tag}
                  </Badge>
                  <Avatar className="size-5 shrink-0">
                    <AvatarFallback className="text-[9px]">{task.assignee}</AvatarFallback>
                  </Avatar>
                  <span className="sr-only">Assigned to {task.assigneeName}</span>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </section>
  );
}