import React from 'react';
import { CreditCard, ShieldCheck, RefreshCcw, Cpu, LucideIcon, CheckCircle2 } from 'lucide-react';
import { Section } from '../types';

const IconMap: Record<string, LucideIcon> = {
  CreditCard,
  ShieldCheck,
  RefreshCcw,
  Cpu,
};

interface SectionCardProps {
  section: Section;
}

const SectionCard: React.FC<SectionCardProps> = ({ section }) => {
  const Icon = IconMap[section.icon] || Cpu;

  const getPriorityColor = (priority: string) => {
    switch (priority) {
      case 'high': return 'border-l-4 border-l-rose-500';
      case 'medium': return 'border-l-4 border-l-amber-500';
      default: return 'border-l-4 border-l-slate-300';
    }
  };

  return (
    <section id={section.id} className="scroll-mt-24">
      <div className="flex items-center gap-3 mb-4">
        <div className={`p-2 rounded-lg ${section.id === 'cost' ? 'bg-blue-100 text-blue-600' : section.id === 'legal' ? 'bg-emerald-100 text-emerald-600' : section.id === 'continuity' ? 'bg-amber-100 text-amber-600' : 'bg-slate-100 text-slate-600'}`}>
          <Icon className="w-5 h-5" />
        </div>
        <div>
          <h3 className="text-lg font-bold text-slate-800">{section.title}</h3>
          <p className="text-xs text-slate-400 font-medium tracking-wide uppercase">{section.subtitle}</p>
        </div>
      </div>

      <div className="grid gap-3">
        {section.questions.map((q, idx) => (
          <div 
            key={q.id} 
            className={`group bg-white rounded-xl border border-slate-200 p-5 shadow-sm hover:shadow-md hover:border-indigo-200 transition-all ${getPriorityColor(q.priority)}`}
          >
            <div className="flex gap-4">
              <div className="shrink-0 flex items-center justify-center w-6 h-6 rounded-full bg-slate-50 text-[10px] font-bold text-slate-400 border border-slate-100 group-hover:bg-indigo-50 group-hover:text-indigo-500 group-hover:border-indigo-100 transition-colors">
                {idx + 1}
              </div>
              <div className="space-y-2 flex-1">
                <p className="text-slate-700 leading-relaxed font-medium">
                  {q.text.split(':').length > 1 ? (
                    <>
                      <span className="text-slate-900 font-bold underline decoration-indigo-200 underline-offset-4">{q.text.split(':')[0]}:</span>
                      {q.text.split(':')[1]}
                    </>
                  ) : q.text}
                </p>
                <div className="flex items-center gap-4 pt-1">
                   {q.priority === 'high' && (
                     <span className="flex items-center gap-1 text-[10px] font-bold bg-rose-50 text-rose-600 px-2 py-0.5 rounded-full uppercase tracking-tight">
                        Essential
                     </span>
                   )}
                   <div className="flex gap-2">
                     <button className="flex items-center gap-1.5 text-xs text-slate-400 hover:text-emerald-600 transition-colors">
                        <CheckCircle2 className="w-3.5 h-3.5" />
                        확인완료
                     </button>
                   </div>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
};

export default SectionCard;