import { X, Check, Minus } from 'lucide-react';

interface SecurityScoreBreakdownPanelProps {
    score: number;
    modules: Array<{ key: string; label: string; enabled: boolean; weight: number; contribution: number }>;
    onClose: () => void;
}

export function SecurityScoreBreakdownPanel({ score, modules, onClose }: SecurityScoreBreakdownPanelProps) {
    return (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/70 backdrop-blur-sm p-4" onClick={onClose}>
            <div
                className="w-full max-w-lg rounded-2xl border border-slate-800 bg-slate-950 p-6 shadow-2xl"
                onClick={(event) => event.stopPropagation()}
            >
                <div className="mb-5 flex items-start justify-between gap-4">
                    <div>
                        <h3 className="text-lg font-bold text-white">Security Score Breakdown</h3>
                        <p className="mt-1 text-sm text-emerald-400 font-black">{score} / 100</p>
                    </div>
                    <button type="button" onClick={onClose} className="rounded-lg border border-slate-800 p-2 text-slate-400 hover:text-white">
                        <X className="h-4 w-4" />
                    </button>
                </div>

                <div className="space-y-2">
                    {modules.map((module) => (
                        <div key={module.key} className="flex items-center justify-between gap-3 rounded-xl border border-slate-800/80 bg-slate-900/40 px-3 py-2.5">
                            <div className="flex items-center gap-2 min-w-0">
                                {module.enabled ? (
                                    <Check className="h-3.5 w-3.5 shrink-0 text-emerald-400" />
                                ) : (
                                    <Minus className="h-3.5 w-3.5 shrink-0 text-rose-400" />
                                )}
                                <span className="truncate text-xs text-slate-200">{module.label}</span>
                            </div>
                            <span className="text-[10px] font-bold text-slate-500 whitespace-nowrap">
                                +{module.contribution}/{module.weight}
                            </span>
                        </div>
                    ))}
                </div>
            </div>
        </div>
    );
}