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

interface PersonalityLanguagePanelProps {
  readonly workflow: PersonalityQuizWorkflow;
}

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

  return (
    <div className="space-y-5">
      <div className="bg-gradient-to-r from-emerald-500/10 to-teal-500/10 rounded-xl p-5 border border-emerald-500/20">
        <h4 className="font-bold text-emerald-400 mb-3 flex items-center gap-2">
          <MessageSquare size={16} /> Your Workplace Language Style
        </h4>
        <p className="text-sm text-slate-300 leading-relaxed">{result.workplaceLanguage}</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">Communication Strengths</h4>
        <div className="space-y-2">
          {workflow.communicationStrengths.map((strength) => (
            <div key={strength} className="flex items-center gap-2 p-2 bg-emerald-500/5 border border-emerald-500/10 rounded-lg">
              <CheckCircle size={14} className="text-emerald-400 flex-shrink-0" />
              <span className="text-xs text-slate-300">{strength}</span>
            </div>
          ))}
        </div>
      </div>

      <div className="bg-amber-500/10 border border-amber-500/20 rounded-xl p-4">
        <h4 className="font-semibold text-amber-400 text-sm mb-2">Growth Area</h4>
        <p className="text-xs text-slate-400">{workflow.communicationGrowthArea}</p>
      </div>
    </div>
  );
}
