'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback } from 'react';
import { Checkbox } from '../../ui/checkbox.js';
import { cn } from '../../../lib/utils.js';
import { WorkItemRow } from '../../features/projects/work-item-row.js';
import { useBulkSelection } from './bulk-selection-context.js';
export function SelectableWorkItemRow({ workItem, state, projectPrefix, }) {
    const { isSelected, toggleSelection } = useBulkSelection();
    const selected = isSelected(workItem.id);
    const handleCheckboxChange = useCallback(() => {
        toggleSelection(workItem.id);
    }, [toggleSelection, workItem.id]);
    return (_jsxs("div", { "data-testid": `selectable-work-item-row-${projectPrefix}-${workItem.sequenceId}`, className: cn('flex items-center', selected && 'bg-accent/60'), children: [_jsx("div", { className: "flex shrink-0 items-center pl-2", children: _jsx(Checkbox, { "data-testid": `work-item-checkbox-${workItem.id}`, checked: selected, onCheckedChange: handleCheckboxChange, "aria-label": `Select ${projectPrefix}-${workItem.sequenceId}` }) }), _jsx("div", { className: "min-w-0 flex-1", children: _jsx(WorkItemRow, { workItem: workItem, state: state, projectPrefix: projectPrefix }) })] }));
}
