import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Box, Text } from "ink";
import { toneColor } from "./terminalTheme.js";
export function buildListItemModel(props) {
    if (props.disabled) {
        return { indicator: " ", marker: "   ", tone: "muted", dim: true };
    }
    const indicator = props.focused ? ">" : props.showScrollDown ? "v" : props.showScrollUp ? "^" : " ";
    const marker = props.selected ? "[x]" : "   ";
    const tone = props.selected ? "success" : props.focused ? "brand" : "default";
    return { indicator, marker, tone, dim: false };
}
export function ListItem(props) {
    const model = buildListItemModel(props);
    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { color: toneColor(model.tone), dimColor: model.dim, children: model.indicator }), _jsx(Text, { children: " " }), _jsx(Text, { color: toneColor(model.tone), dimColor: model.dim, children: props.children }), _jsx(Text, { color: toneColor(props.selected && !props.disabled ? "success" : "muted"), children: ` ${model.marker}` })] }), props.description && (_jsx(Box, { paddingLeft: 2, children: _jsx(Text, { color: "gray", children: props.description }) }))] }));
}
