'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 { TaskState } from '../../../../../../packages/core/src/domain/generated/output.js';
import { SdlcCard } from './sdlc-card.js';
/**
 * Hex accent colours for the column header dot, mirroring the PM board's
 * colour language — keyed off the enum, no magic strings.
 */
const COLUMN_COLORS = {
    [TaskState.Todo]: '#94a3b8', // slate-400
    [TaskState.WIP]: '#f59e0b', // amber-500
    [TaskState.Review]: '#8b5cf6', // violet-500
    [TaskState.Done]: '#22c55e', // emerald-500
};
export function SdlcColumn({ status, title, tasks, onCardClick }) {
    const { setNodeRef, isOver } = useDroppable({ id: status });
    const taskIds = tasks.map((t) => t.task.id);
    return (_jsxs("div", { "data-testid": `sdlc-column-${status}`, 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: COLUMN_COLORS[status] } }), _jsx("span", { className: "text-xs font-semibold", children: title }), _jsx("span", { className: "text-muted-foreground text-[10px]", children: tasks.length })] }), _jsx(SortableContext, { items: taskIds, 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: [tasks.map(({ task, subTasks, epicName }) => (_jsx(SdlcCard, { task: task, subTasks: subTasks, epicName: epicName, onClick: onCardClick }, task.id))), tasks.length === 0 ? (_jsx("div", { className: "flex flex-1 items-center justify-center", children: _jsx("p", { className: "text-muted-foreground/50 text-[10px]", children: "No tasks" }) })) : null] }) })] }));
}
