'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useDroppable } from '@dnd-kit/core';
import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
import { cn } from '../../../lib/utils.js';
import { BoardCard } from './board-card.js';
export function BoardColumn({ id, title, color, items, projectPrefix, stateMap, onCardClick, }) {
    const { setNodeRef, isOver } = useDroppable({ id });
    const itemIds = items.map((item) => item.id);
    return (_jsxs("div", { "data-testid": `board-column-${id}`, className: "bg-muted/30 flex w-72 shrink-0 flex-col rounded-lg", children: [_jsxs("div", { className: "flex items-center gap-2 px-3 py-2.5", children: [_jsx("span", { className: "h-2.5 w-2.5 shrink-0 rounded-full", style: { backgroundColor: color } }), _jsx("span", { className: "text-xs font-semibold", children: title }), _jsx("span", { className: "text-muted-foreground text-[10px]", children: items.length })] }), _jsx(SortableContext, { items: itemIds, strategy: verticalListSortingStrategy, children: _jsxs("div", { ref: setNodeRef, className: cn('flex min-h-[120px] flex-1 flex-col gap-2 px-2 pb-2 transition-colors', isOver && 'bg-accent/40 rounded-b-lg'), children: [items.map((item) => (_jsx(BoardCard, { workItem: item, projectPrefix: projectPrefix, state: stateMap.get(item.stateId), onClick: onCardClick }, item.id))), items.length === 0 ? (_jsx("div", { className: "flex flex-1 items-center justify-center", children: _jsx("p", { className: "text-muted-foreground/50 text-[10px]", children: "No items" }) })) : null] }) })] }));
}
