import React from 'react';
import { VoiceMood, VoiceName } from '../types';
import { VOICE_MOODS } from '../constants';

interface VoiceMoodSelectorProps {
  selectedMood: VoiceMood;
  onMoodChange: (mood: VoiceMood, voice: VoiceName, speed: number) => void;
}

export const VoiceMoodSelector: React.FC<VoiceMoodSelectorProps> = ({
  selectedMood,
  onMoodChange
}) => {
  return (
    <div className="space-y-3">
      <h3 className="text-sm font-semibold text-slate-700 dark:text-slate-300 px-1">
        Listening Mood
      </h3>
      <div className="flex flex-wrap gap-2">
        {VOICE_MOODS.map((mood) => {
          const isSelected = selectedMood === mood.id;
          return (
            <button
              key={mood.id}
              onClick={() => onMoodChange(mood.id, mood.recommendedVoice, mood.recommendedSpeed)}
              className={`
                px-4 py-2 rounded-xl text-sm font-medium transition-all flex items-center gap-2
                ${isSelected
                  ? 'bg-blue-500 text-white shadow-md'
                  : 'bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-700'
                }
              `}
            >
              <span>{mood.emoji}</span>
              <span>{mood.label}</span>
            </button>
          );
        })}
      </div>
      <p className="text-xs text-slate-500 dark:text-slate-400 px-1">
        {VOICE_MOODS.find(m => m.id === selectedMood)?.description}
      </p>
    </div>
  );
};