import { CheckCircle } from 'lucide-react';

interface PersonalityQuestionOptionProps {
  readonly text: string;
  readonly value: string;
  readonly selected: boolean;
  readonly onSelect: (value: string) => void;
}

export function PersonalityQuestionOption({
  text,
  value,
  selected,
  onSelect,
}: PersonalityQuestionOptionProps) {
  return (
    <button
      type="button"
      onClick={() => onSelect(value)}
      className={`w-full text-left p-4 rounded-xl border-2 transition-all ${
        selected
          ? 'border-violet-500 bg-violet-500/15 shadow-lg shadow-violet-500/10'
          : 'border-slate-600/40 bg-slate-700/30 hover:bg-violet-500/5 hover:border-violet-500/30'
      }`}
    >
      <div className="flex items-start gap-3">
        <div className={`w-6 h-6 rounded-full border-2 flex items-center justify-center flex-shrink-0 mt-0.5 transition-all ${
          selected ? 'border-violet-500 bg-violet-500' : 'border-slate-500'
        }`}>
          {selected && <CheckCircle size={14} className="text-white" />}
        </div>
        <span className="text-sm text-slate-200 leading-relaxed">{text}</span>
      </div>
    </button>
  );
}
