import { motion } from 'motion/react';
import { AlertCircle } from 'lucide-react';
import { SectionWrapper } from './ui/SectionWrapper';
import type { DiagnosisItem } from '../../types/report';

interface ProblemDiagnosisProps {
  diagnosis: DiagnosisItem[];
}

const severityDot: Record<string, string> = {
  critical: 'bg-[#C084CF]',
  warning: 'bg-[#8B9CF7]',
  good: 'bg-[#7C6DD8]',
  excellent: 'bg-[#6C5CE7]',
  unknown: 'bg-slate-400',
};

export default function ProblemDiagnosis({ diagnosis }: ProblemDiagnosisProps) {
  return (
    <SectionWrapper id="problem-diagnosis" title="Critical Issues" subtitle="핵심 문제 진단" dark>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {diagnosis.map((item, i) => (
          <motion.div
            key={i}
            className="bg-white/10 backdrop-blur-sm border border-white/10 rounded-2xl p-6 relative overflow-hidden"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5, delay: i * 0.08 }}
          >
            {/* Severity dot */}
            <div className="absolute top-4 right-4">
              <span className={`block w-3 h-3 rounded-full ${severityDot[item.severity] ?? severityDot.unknown}`} />
            </div>

            <div className="flex items-start gap-3">
              <div className="shrink-0 w-8 h-8 rounded-lg bg-white/10 flex items-center justify-center mt-1">
                <AlertCircle size={16} className="text-[#E8B4C0]" />
              </div>
              <div>
                <p className="text-lg font-bold text-white mb-2">{item.category}</p>
                <p className="text-sm text-purple-200 leading-relaxed">{item.detail}</p>
              </div>
            </div>
          </motion.div>
        ))}
      </div>
    </SectionWrapper>
  );
}