import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Box, Text } from 'ink';
import { useTerminalWidth } from '../hooks/useTerminalWidth.js';
import { useTheme } from '../hooks/useTheme.js';
const STATUS_ICONS = {
    pending: '○',
    in_progress: '◐',
    completed: '✓',
};
export function TaskListDisplay({ tasks, title = 'Tasks', }) {
    const boxWidth = useTerminalWidth();
    const { colors } = useTheme();
    if (tasks.length === 0) {
        return (_jsx(Box, { flexDirection: "column", marginY: 1, children: _jsx(Text, { color: colors.secondary, children: "No tasks found. Create one with write_tasks." }) }));
    }
    const getStatusColor = (status) => {
        switch (status) {
            case 'completed':
                return colors.success;
            case 'in_progress':
                return colors.warning;
            default:
                return colors.secondary;
        }
    };
    return (_jsx(Box, { flexDirection: "column", marginTop: 1, marginBottom: 1, children: _jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { children: _jsx(Text, { bold: true, color: colors.primary, children: title }) }), _jsx(Box, { flexDirection: "column", children: tasks.map((task, index) => (_jsxs(Box, { flexDirection: "row", width: boxWidth, children: [_jsx(Box, { width: 2, children: _jsx(Text, { color: getStatusColor(task.status), children: STATUS_ICONS[task.status] }) }), _jsx(Box, { width: 3, children: _jsxs(Text, { color: colors.secondary, children: [index + 1, "."] }) }), _jsx(Box, { flexShrink: 1, children: _jsx(Text, { wrap: "truncate-end", color: task.status === 'completed' ? colors.secondary : colors.text, children: task.title }) })] }, task.id))) })] }) }));
}
//# sourceMappingURL=task-list-display.js.map