import type { TTSPreferences } from '../types/api';

interface ElevenLabsSettingsPanelProps {
  preferences: TTSPreferences;
  onChange: (preferences: TTSPreferences) => void;
  disabled?: boolean;
}

export function ElevenLabsSettingsPanel({ preferences, onChange, disabled }: ElevenLabsSettingsPanelProps) {
  const stability = preferences.stability ?? 0.5;
  const similarityBoost = preferences.similarity_boost ?? 0.5;

  return (
    <div className="space-y-4">
      {/* Stability Slider */}
      <div className="bg-gray-50 rounded-lg p-4">
        <label className="block text-sm font-medium text-gray-700 mb-2">
          Stability: {stability.toFixed(2)}
        </label>
        <p className="text-xs text-gray-500 mb-3">
          Controls how consistent the voice is between regenerations. Higher values are more stable.
        </p>
        <input
          type="range"
          min={0}
          max={1}
          step={0.05}
          value={stability}
          onChange={(e) => onChange({ ...preferences, stability: parseFloat(e.target.value) })}
          disabled={disabled}
          className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer disabled:cursor-not-allowed"
        />
        <div className="flex justify-between text-xs text-gray-500 mt-1">
          <span>More Variable</span>
          <span>More Stable</span>
        </div>
      </div>

      {/* Similarity Boost Slider */}
      <div className="bg-gray-50 rounded-lg p-4">
        <label className="block text-sm font-medium text-gray-700 mb-2">
          Similarity Boost: {similarityBoost.toFixed(2)}
        </label>
        <p className="text-xs text-gray-500 mb-3">
          Controls how closely the voice tries to match the original. Higher values increase similarity.
        </p>
        <input
          type="range"
          min={0}
          max={1}
          step={0.05}
          value={similarityBoost}
          onChange={(e) => onChange({ ...preferences, similarity_boost: parseFloat(e.target.value) })}
          disabled={disabled}
          className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer disabled:cursor-not-allowed"
        />
        <div className="flex justify-between text-xs text-gray-500 mt-1">
          <span>Low</span>
          <span>High</span>
        </div>
      </div>
    </div>
  );
}
