import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { Box, Text } from "ink";
import { useTheme } from "../theme/theme.js";
export function StatusRow({ id, glyph, children, glyphColor, bold, muted, presentation, }) {
    const theme = useTheme();
    const color = glyphColor ?? theme.commandColor;
    const displayGlyph = presentation?.glyph ?? glyph ?? "";
    const displayBold = presentation?.bold ?? bold;
    const displayMuted = presentation?.muted ?? muted;
    const displayChildren = children ?? presentation?.text ?? "";
    return (_jsxs(Box, { flexDirection: "row", paddingLeft: 1, flexShrink: 1, children: [_jsx(Box, { width: 2, flexShrink: 0, children: _jsx(Text, { color: color, bold: displayBold ?? true, children: displayGlyph }) }), _jsx(Box, { flexDirection: "column", flexGrow: 1, children: _jsxs(Text, { color: displayMuted ? theme.textDim : theme.commandColor, bold: displayBold, wrap: "wrap", children: [presentation?.label ? _jsx(Text, { color: theme.textDim, children: presentation.label }) : null, displayChildren, presentation?.detail ? _jsx(Text, { color: theme.textDim, children: presentation.detail }) : null] }) })] }, id));
}
//# sourceMappingURL=StatusRow.js.map