Sprint board

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

interface BoardLabel {
  text: string;
  variant: "info" | "success" | "warning" | "destructive" | "secondary";
}

interface BoardAssignee {
  name: string;
  initials: string;
}

interface BoardCard {
  id: string;
  title: string;
  labels: BoardLabel[];
  due: string;
  comments: number;
  assignees: BoardAssignee[];
}

interface BoardColumn {
  id: string;
  name: string;
  cards: BoardCard[];
}

const boardColumns: BoardColumn[] = [
  {
    id: "backlog",
    name: "Backlog",
    cards: [
      { id: "task-118", title: "Migrate billing webhooks to the v2 event schema", labels: [{ text: "Backend", variant: "info" }], due: "Jul 21", comments: 3, assignees: [{ name: "Devon Lane", initials: "DL" }] },
      { id: "task-117", title: "Design empty states for the reports page", labels: [{ text: "Design", variant: "secondary" }], due: "Jul 22", comments: 1, assignees: [{ name: "Hana Yoshida", initials: "HY" }] },
      { id: "task-116", title: "Spike: evaluate ClickHouse for event analytics", labels: [{ text: "Data", variant: "warning" }], due: "Jul 24", comments: 5, assignees: [{ name: "Marcus Chen", initials: "MC" }] },
    ],
  },
  {
    id: "in-progress",
    name: "In progress",
    cards: [
      { id: "task-112", title: "Rework onboarding checklist with progress tracking", labels: [{ text: "Frontend", variant: "info" }, { text: "Growth", variant: "success" }], due: "Jul 15", comments: 8, assignees: [{ name: "Ingrid Solberg", initials: "IS" }, { name: "Rosa Delgado", initials: "RD" }] },
      { id: "task-111", title: "Fix duplicated invoice emails on plan change", labels: [{ text: "Bug", variant: "destructive" }], due: "Jul 14", comments: 12, assignees: [{ name: "Marcus Chen", initials: "MC" }] },
      { id: "task-109", title: "SSO with Okta for enterprise workspaces", labels: [{ text: "Backend", variant: "info" }], due: "Jul 17", comments: 6, assignees: [{ name: "Devon Lane", initials: "DL" }, { name: "Felix Weber", initials: "FW" }] },
    ],
  },
  {
    id: "in-review",
    name: "In review",
    cards: [
      { id: "task-107", title: "Audit-log export to CSV and S3", labels: [{ text: "Backend", variant: "info" }], due: "Jul 14", comments: 4, assignees: [{ name: "Amara Diallo", initials: "AD" }] },
      { id: "task-105", title: "New pricing page copy and A/B experiment", labels: [{ text: "Growth", variant: "success" }], due: "Jul 15", comments: 9, assignees: [{ name: "Hana Yoshida", initials: "HY" }, { name: "Ingrid Solberg", initials: "IS" }] },
    ],
  },
  {
    id: "done",
    name: "Done",
    cards: [
      { id: "task-102", title: "Rate-limit the public REST API per workspace", labels: [{ text: "Backend", variant: "info" }], due: "Jul 11", comments: 7, assignees: [{ name: "Marcus Chen", initials: "MC" }] },
      { id: "task-099", title: "Dark-mode audit for the settings screens", labels: [{ text: "Design", variant: "secondary" }], due: "Jul 10", comments: 2, assignees: [{ name: "Rosa Delgado", initials: "RD" }] },
    ],
  },
];

export function KanbanBoardBlock() {
  return (
    <section aria-label="Sprint 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">Sprint 24 · Growth squad</h2>
          <p className="text-sm text-fg-secondary">Jul 7 – Jul 18 · 10 tasks across 4 stages</p>
        </div>
        <Button variant="primary" size="sm">
          <Plus className="size-4" aria-hidden="true" />
          New task
        </Button>
      </header>

      <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        {boardColumns.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>
              <Badge variant="secondary">{column.cards.length}</Badge>
              <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-3">
              {column.cards.map((card) => (
                <li
                  key={card.id}
                  className="flex flex-col gap-3 rounded-xl border border-border bg-surface-raised p-4 shadow-xs"
                >
                  <div className="flex flex-wrap gap-1.5">
                    {card.labels.map((label) => (
                      <Badge key={label.text} variant={label.variant}>
                        {label.text}
                      </Badge>
                    ))}
                  </div>
                  <p className="text-sm font-medium leading-snug text-fg">{card.title}</p>
                  <div className="flex items-center justify-between gap-3">
                    <div className="flex items-center gap-3 text-xs text-fg-tertiary">
                      <span className="inline-flex items-center gap-1">
                        <CalendarDays className="size-3.5" aria-hidden="true" />
                        {card.due}
                      </span>
                      <span className="inline-flex items-center gap-1">
                        <MessageSquare className="size-3.5" aria-hidden="true" />
                        {card.comments}
                        <span className="sr-only">comments</span>
                      </span>
                    </div>
                    <div className="flex -space-x-2">
                      <span className="sr-only">
                        {"Assigned to " + card.assignees.map((person) => person.name).join(", ")}
                      </span>
                      {card.assignees.map((assignee) => (
                        <Avatar
                          key={assignee.initials}
                          className="size-6 border-2 border-surface-raised"
                        >
                          <AvatarFallback className="text-[10px]">
                            {assignee.initials}
                          </AvatarFallback>
                        </Avatar>
                      ))}
                    </div>
                  </div>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </section>
  );
}