'use client';
import { Mic, MicOff } from 'lucide-react';

interface Props {
  active: boolean;
  listening: boolean;
  onToggle: () => void;
  disabled?: boolean;
}

export default function VoiceToggle({ active, listening, onToggle, disabled }: Props) {
  const label = disabled
    ? 'Voice not supported in this browser'
    : active
    ? listening ? 'Listening — click to stop' : 'Voice mode on — click to disable'
    : 'Enable voice mode';

  return (
    <button
      onClick={onToggle}
      disabled={disabled}
      title={label}
      aria-label={label}
      className="relative w-10 h-10 rounded-xl flex items-center justify-center transition-all duration-200 flex-shrink-0"
      style={disabled
        ? { background: 'var(--bg-secondary)', color: '#9ca3af', border: '1.5px solid var(--border)', cursor: 'not-allowed', opacity: 0.5 }
        : active
        ? { background: 'linear-gradient(135deg, #6366f1, #a855f7)', color: 'white' }
        : { background: 'var(--bg-secondary)', color: 'var(--text-secondary)', border: '1.5px solid var(--border)' }}>
      {listening && (
        <span className="absolute inset-0 rounded-xl animate-voice-pulse"
          style={{ background: 'rgba(99,102,241,0.25)' }} />
      )}
      {active
        ? <Mic className="w-4 h-4 relative z-10" />
        : <MicOff className="w-4 h-4" />}
    </button>
  );
}