import { Briefcase, CheckCircle, MessageSquare } from 'lucide-react';
import type { PersonalityQuizWorkflow } from '@/components/personality-quiz/types';

interface PersonalityOverviewPanelProps {
  readonly workflow: PersonalityQuizWorkflow;
}

export function PersonalityOverviewPanel({ workflow }: PersonalityOverviewPanelProps) {
  const result = workflow.result;
  if (!result) return null;

  return (
    <div className="space-y-5">
      <p className="text-sm text-slate-300 leading-relaxed">{result.description}</p>

      <div className="bg-slate-700/30 rounded-xl p-4 border border-slate-600/30">
        <h4 className="font-semibold text-white text-sm mb-3 flex items-center gap-2">
          <CheckCircle size={14} className="text-emerald-400" /> Core Strengths
        </h4>
        <div className="flex flex-wrap gap-2">
          {result.strengths.map((strength) => (
            <span key={strength} className={`${result.bgColor} ${result.borderColor} border text-xs font-medium px-3 py-1.5 rounded-lg text-slate-200`}>
              {strength}
            </span>
          ))}
        </div>
      </div>

      <div className="bg-slate-700/30 rounded-xl p-4 border border-slate-600/30">
        <h4 className="font-semibold text-white text-sm mb-2 flex items-center gap-2">
          <Briefcase size={14} className="text-blue-400" /> Ideal Work Environment
        </h4>
        <p className="text-xs text-slate-400">{result.idealWorkEnvironment}</p>
      </div>

      <div className="bg-slate-700/30 rounded-xl p-4 border border-slate-600/30">
        <h4 className="font-semibold text-white text-sm mb-2 flex items-center gap-2">
          <MessageSquare size={14} className="text-amber-400" /> Communication Style
        </h4>
        <p className="text-xs text-slate-400">{result.communicationStyle}</p>
      </div>

      <div className="bg-slate-700/30 rounded-xl p-4 border border-slate-600/30">
        <h4 className="font-semibold text-white text-sm mb-3">Your Type Breakdown</h4>
        <div className="grid grid-cols-4 gap-2">
          {workflow.typeBreakdown.map((item) => (
            <div key={`${item.label}-${item.letter}`} className={`${result.bgColor} ${result.borderColor} border rounded-xl p-3 text-center`}>
              <div className="text-2xl font-black text-white">{item.letter}</div>
              <div className="text-[10px] text-slate-400 mt-1">{item.label}</div>
              <div className="text-[10px] font-medium text-slate-300">{item.fullLabel}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
