import React from 'react';
import { Box, Cpu, Activity } from 'lucide-react';
import { Recipe } from '../types';
import { CyberPanel } from './common/CyberPanel';

interface ModelInfoPanelProps {
    currentRecipe: Recipe;
}

export const ModelInfoPanel: React.FC<ModelInfoPanelProps> = ({ currentRecipe }) => {
    return (
        <CyberPanel className="flex-none">
            <div className="mb-3 flex items-center justify-between text-xs text-neon-blue font-bold tracking-widest uppercase border-b border-white/10 pb-2">
                <span>Model Information</span>
                <Box className="w-3 h-3" />
            </div>

            <div className="space-y-4">
                <div>
                    <div className="text-[10px] text-slate-500 font-mono mb-1">SELECTED MODEL</div>
                    <div className="text-xl font-bold text-white tracking-wide truncate flex items-center gap-2">
                        <Cpu className="w-4 h-4 text-neon-blue" />
                        {currentRecipe.name}
                    </div>
                </div>

                <div className="grid grid-cols-2 gap-2">
                    <div className="bg-white/5 rounded p-2 border border-white/5">
                        <div className="text-[9px] text-slate-500 font-mono uppercase">Model ID</div>
                        <div className="text-sm font-mono text-neon-blue">{currentRecipe.id}</div>
                    </div>
                    <div className="bg-white/5 rounded p-2 border border-white/5">
                        <div className="text-[9px] text-slate-500 font-mono uppercase">Last Mod</div>
                        <div className="text-sm font-mono text-slate-300">{currentRecipe.lastModified}</div>
                    </div>
                </div>

                <div className="space-y-1">
                    <div className="flex justify-between text-[10px] font-mono text-slate-400">
                        <span>TARGET CYCLE</span>
                        <span className="text-neon-green">12.5s</span>
                    </div>
                    <div className="w-full h-1 bg-slate-800 rounded-full overflow-hidden">
                        <div className="h-full w-[85%] bg-neon-green/50"></div>
                    </div>

                    <div className="flex justify-between text-[10px] font-mono text-slate-400 mt-2">
                        <span>EST. YIELD</span>
                        <span className="text-neon-blue">99.8%</span>
                    </div>
                    <div className="w-full h-1 bg-slate-800 rounded-full overflow-hidden">
                        <div className="h-full w-[99%] bg-neon-blue/50"></div>
                    </div>
                </div>
            </div>
        </CyberPanel>
    );
};