/**
 * Metric Card Component
 *
 * Displays a single metric with optional trend indicator,
 * sparkline chart, and status coloring.
 */
import React from 'react';
import { Box, Text } from 'ink';
import { useTheme } from '../../context/theme-context.js';
/**
 * Metric Card - Displays a key metric with styling
 */
export function MetricCard({ label, value, unit, detail, status = 'neutral', trend, icon, width, bordered = false, }) {
    const { colors } = useTheme();
    // Determine color based on status
    const statusColors = {
        success: colors.success,
        warning: colors.warning,
        error: colors.error,
        neutral: colors.text,
    };
    const valueColor = statusColors[status] || colors.text;
    // Trend indicators
    const trendIcons = {
        up: { icon: '↑', color: colors.success },
        down: { icon: '↓', color: colors.error },
        stable: { icon: '→', color: colors.textMuted },
    };
    const trendDisplay = trend ? trendIcons[trend] : null;
    const content = (React.createElement(Box, { flexDirection: "column", width: width },
        React.createElement(Box, null,
            icon && React.createElement(Text, null,
                icon,
                " "),
            React.createElement(Text, { color: colors.textMuted }, label)),
        React.createElement(Box, null,
            React.createElement(Text, { bold: true, color: valueColor }, value),
            unit && React.createElement(Text, { color: colors.textMuted },
                " ",
                unit),
            trendDisplay && (React.createElement(Text, { color: trendDisplay.color },
                " ",
                trendDisplay.icon))),
        detail && (React.createElement(Box, null,
            React.createElement(Text, { dimColor: true }, detail)))));
    if (bordered) {
        return (React.createElement(Box, { borderStyle: "single", borderColor: colors.border, paddingX: 1, width: width }, content));
    }
    return content;
}
/**
 * Metric Row - Horizontal layout of metrics
 */
export function MetricRow({ children, gap = 2, }) {
    return (React.createElement(Box, { flexDirection: "row", gap: gap }, children));
}
/**
 * Metric Grid - Grid layout of metric cards
 */
export function MetricGrid({ children, columns = 2, }) {
    const { colors } = useTheme();
    return (React.createElement(Box, { flexDirection: "row", flexWrap: "wrap", borderStyle: "single", borderColor: colors.border, padding: 1 }, React.Children.map(children, (child, index) => (React.createElement(Box, { key: index, width: `${100 / columns}%`, paddingRight: 1 }, child)))));
}
export default MetricCard;
//# sourceMappingURL=metric-card.js.map