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

interface PersonalityRelationshipsPanelProps {
  readonly workflow: PersonalityQuizWorkflow;
}

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

  return (
    <div className="space-y-5">
      <div className="bg-gradient-to-r from-blue-500/10 to-cyan-500/10 rounded-xl p-5 border border-blue-500/20">
        <h4 className="font-bold text-blue-400 mb-3 flex items-center gap-2">
          <Users size={16} /> How You Build Professional Relationships
        </h4>
        <p className="text-sm text-slate-300 leading-relaxed">{result.workRelationships}</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">Tips for Working with Others</h4>
        <div className="space-y-2">
          {workflow.relationshipTips.map((item) => (
            <div key={item.type} className="flex items-start gap-3 p-3 bg-slate-700/20 rounded-lg">
              <div className={`w-8 h-8 rounded-lg ${result.bgColor} ${result.borderColor} border flex items-center justify-center flex-shrink-0`}>
                <Users size={14} className="text-slate-300" />
              </div>
              <div>
                <span className="text-xs font-semibold text-white">{item.type}</span>
                <p className="text-[11px] text-slate-400 mt-0.5">{item.tip}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
