import React from 'react';
import { Play, Square, RotateCw } from 'lucide-react';
import { TechButton } from './common/TechButton';
import { CyberPanel } from './common/CyberPanel';
import { SystemState } from '../types';

interface SystemStatusPanelProps {
    systemState: SystemState;
    onControl: (action: 'start' | 'stop' | 'reset') => void;
}

export const SystemStatusPanel: React.FC<SystemStatusPanelProps> = ({
    systemState,
    onControl
}) => {
    return (
        <CyberPanel className="flex-none">
            <div className="mb-3 text-xs text-neon-blue font-bold tracking-widest uppercase">System Status</div>
            <div className={`text-2xl font-tech font-bold mb-4 ${systemState === SystemState.RUNNING ? 'text-neon-green text-shadow-glow-green' : 'text-slate-400'}`}>
                {systemState}
            </div>

            {/* Horizontal Button Layout */}
            <div className="grid grid-cols-3 gap-2">
                <TechButton
                    variant="green"
                    className="flex flex-col items-center justify-center gap-1 h-20"
                    active={systemState === SystemState.RUNNING}
                    onClick={() => onControl('start')}
                >
                    <Play className="w-5 h-5" />
                    <span className="text-xs">START</span>
                </TechButton>
                <TechButton
                    variant="amber"
                    className="flex flex-col items-center justify-center gap-1 h-20"
                    active={systemState === SystemState.PAUSED}
                    onClick={() => onControl('stop')}
                >
                    <Square className="w-5 h-5 fill-current" />
                    <span className="text-xs">STOP</span>
                </TechButton>
                <TechButton
                    className="flex flex-col items-center justify-center gap-1 h-20"
                    onClick={() => onControl('reset')}
                >
                    <RotateCw className="w-5 h-5" />
                    <span className="text-xs">RESET</span>
                </TechButton>
            </div>
        </CyberPanel>
    );
};