Kanban board

"use client";
import { useState } from "react";
import { Board, BoardCard, BoardColumn, type BoardColumnData } from "@nexera-ui/react";

interface Candidate {
  id: string;
  name: string;
  role: string;
  detail: string;
}

const PIPELINE: BoardColumnData<Candidate>[] = [
  {
    id: "applied",
    title: "Applied",
    items: [
      {
        id: "zara",
        name: "Zara Siddiqui",
        role: "Frontend engineer",
        detail: "Applied 3 days ago",
      },
      { id: "omar", name: "Omar Farooq", role: "Data analyst", detail: "Applied 5 days ago" },
      { id: "sana", name: "Sana Malik", role: "QA engineer", detail: "Applied 1 week ago" },
    ],
  },
  {
    id: "screening",
    title: "Screening",
    items: [
      {
        id: "bilal",
        name: "Bilal Ahmed",
        role: "Backend engineer",
        detail: "Phone screen on 08 Oct 2026",
      },
    ],
  },
  {
    id: "interview",
    title: "Interview",
    items: [
      { id: "hina", name: "Hina Baig", role: "Product designer", detail: "Panel on 12 Oct 2026" },
    ],
  },
  { id: "offer", title: "Offer", items: [] },
];

/**
 * Kanban board: hiring candidates in columns. Drag a card between columns, or use the keyboard (arrow to the handle, Enter,
 * Tab to another column, arrows, Enter), or each card's Move menu: the single-pointer alternative to dragging.
 */
export default function KanbanBoard() {
  const [columns, setColumns] = useState(PIPELINE);
  const total = columns.reduce((sum, column) => sum + column.items.length, 0);

  return (
    <div className="@container bg-page px-4 py-8 @3xl:px-8">
      <div className="mx-auto grid w-full max-w-6xl gap-5">
        <header className="grid gap-1">
          <h2 className="text-heading-h2 text-primary">Hiring pipeline</h2>
          <p className="text-body-default text-secondary">
            Engineering and design roles, Q4 2026 · {total} candidates. Drag a card, or use its Move
            menu, to change its stage.
          </p>
        </header>
        <Board
          columns={columns}
          onColumnsChange={setColumns}
          className="grid grid-cols-1 items-start gap-4 @3xl:grid-cols-2 @5xl:grid-cols-4"
        >
          {columns.map((column) => (
            <section
              key={column.id}
              className="flex min-w-0 flex-col gap-2 rounded-lg bg-sunken p-2"
            >
              <h3
                id={`board-${column.id}`}
                className="m-0 flex items-baseline justify-between px-1 text-heading-h4 text-primary"
              >
                {column.title}
                <span className="text-body-caption text-muted">{column.items.length}</span>
              </h3>
              <BoardColumn<Candidate> columnId={column.id} aria-labelledby={`board-${column.id}`}>
                {(card) => <BoardCard name={card.name} subtitle={card.role} detail={card.detail} />}
              </BoardColumn>
            </section>
          ))}
        </Board>
      </div>
    </div>
  );
}