import { Maximize, Minimize, Pause, Play, RotateCcw, Volume2, VolumeX } from 'lucide-react';

type TimerControlsProps = {
  isRunning: boolean;
  isFinished: boolean;
  remainingSeconds: number;
  totalSeconds: number;
  soundEnabled: boolean;
  isProjection?: boolean;
  onStart: () => void;
  onPause: () => void;
  onReset: () => void;
  onToggleSound: () => void;
  onToggleFullscreen: () => void;
};

export function TimerControls({
  isRunning,
  isFinished,
  remainingSeconds,
  totalSeconds,
  soundEnabled,
  isProjection = false,
  onStart,
  onPause,
  onReset,
  onToggleSound,
  onToggleFullscreen,
}: TimerControlsProps) {
  const primarySizeClass = isProjection ? 'w-16 h-16 md:w-20 md:h-20' : 'w-14 h-14';
  const secondarySizeClass = isProjection ? 'w-12 h-12 md:w-14 md:h-14' : 'w-11 h-11';
  const primaryIconSize = isProjection ? 32 : 26;
  const secondaryIconSize = isProjection ? 24 : 20;
  const primaryButtonClass = `${primarySizeClass} rounded-full bg-white/20 backdrop-blur-md border border-white/30 flex items-center justify-center hover:bg-white/30 transition-all shadow-xl hover:scale-105 active:scale-95 disabled:opacity-30`;
  const secondaryButtonClass = `${secondarySizeClass} rounded-full bg-white/10 backdrop-blur-md border border-white/20 flex items-center justify-center hover:bg-white/20 transition-all hover:scale-105 active:scale-95`;

  return (
    <div className="flex items-center gap-3">
      {!isRunning && !isFinished && (
        <button
          type="button"
          onClick={onStart}
          disabled={remainingSeconds <= 0}
          className={primaryButtonClass}
          aria-label="Start timer"
        >
          <Play size={primaryIconSize} className="text-white ml-0.5" />
        </button>
      )}
      {isRunning && (
        <button type="button" onClick={onPause} className={primaryButtonClass} aria-label="Pause timer">
          <Pause size={primaryIconSize} className="text-white" />
        </button>
      )}
      {(isFinished || (!isRunning && remainingSeconds < totalSeconds)) && (
        <button type="button" onClick={onStart} className={primaryButtonClass} aria-label="Resume timer">
          <Play size={primaryIconSize} className="text-white ml-0.5" />
        </button>
      )}
      <button type="button" onClick={onReset} className={secondaryButtonClass} aria-label="Reset timer">
        <RotateCcw size={secondaryIconSize} className="text-white/80" />
      </button>
      <button
        type="button"
        onClick={onToggleSound}
        className={secondaryButtonClass}
        aria-label={soundEnabled ? 'Mute timer sound' : 'Enable timer sound'}
      >
        {soundEnabled ? (
          <Volume2 size={secondaryIconSize} className="text-white/80" />
        ) : (
          <VolumeX size={secondaryIconSize} className="text-white/80" />
        )}
      </button>
      <button
        type="button"
        onClick={onToggleFullscreen}
        className={secondaryButtonClass}
        aria-label={isProjection ? 'Exit projection mode' : 'Project on large screen'}
        title={isProjection ? 'Exit projection mode' : 'Fullscreen - Project on large screen'}
      >
        {isProjection ? (
          <Minimize size={secondaryIconSize} className="text-white/80" />
        ) : (
          <Maximize size={secondaryIconSize} className="text-white/80" />
        )}
      </button>
    </div>
  );
}
