import React from 'react';
import { Box, Text } from 'ink';
import { SystemInsight } from './types.js';

interface PredictiveInsightsProps {
    insights: SystemInsight[];
}

export const PredictiveInsights: React.FC<PredictiveInsightsProps> = ({ insights }) => {
    if (!insights || insights.length === 0) return null;

    return (
        <Box borderStyle="round" borderColor="yellow" flexDirection="column" paddingX={1} marginBottom={1}>
            <Box gap={1}>
                <Text bold color="yellow">📊 SENTINEL PREDICTIVE GOVERNANCE</Text>
                <Text dimColor>│</Text>
                <Text color="yellow">Alerts: {insights.length}</Text>
            </Box>

            <Box flexDirection="column" marginTop={1}>
                {insights.map((insight) => {
                    const color = insight.severity === 'critical' ? 'red' : insight.severity === 'warning' ? 'yellow' : 'cyan';
                    return (
                        <Box key={insight.id} gap={1} marginBottom={1}>
                            <Text color={color} bold>[{insight.insight_type.toUpperCase()}]</Text>
                            <Box flexDirection="column">
                                <Text color="white" bold>{insight.title}</Text>
                                <Text dimColor italic>{insight.message}</Text>
                            </Box>
                        </Box>
                    );
                })}
            </Box>
        </Box>
    );
};