import type { LucideIcon } from "lucide-react";

interface VolumeControlProps {
  volume: number;
  isMuted: boolean;
  VolumeIcon: LucideIcon;
  showSlider: boolean;
  onToggleSlider: () => void;
  onToggleMute: () => void;
  onVolumeChange: (v: number) => void;
}

export function VolumeControl({
  volume,
  isMuted,
  VolumeIcon,
  showSlider,
  onToggleSlider,
  onToggleMute,
  onVolumeChange,
}: VolumeControlProps) {
  return (
    <div className="pointer-events-auto relative">
      <button
        className="rounded-md bg-black/50 p-1.5 text-zinc-400 backdrop-blur transition-colors hover:bg-black/70 hover:text-white"
        onClick={onToggleSlider}
        title="Volume"
      >
        <VolumeIcon className="h-4 w-4" />
      </button>
      {showSlider && (
        <div className="absolute right-0 top-9 z-30 w-36 rounded-lg border border-zinc-700 bg-zinc-900/95 p-3 shadow-xl backdrop-blur">
          <input
            type="range"
            min={0}
            max={100}
            value={isMuted ? 0 : Math.round(volume * 100)}
            onChange={(e) => {
              const v = Number(e.target.value) / 100;
              onVolumeChange(v);
            }}
            className="w-full accent-white"
          />
          <div className="mt-1.5 flex items-center justify-between">
            <button
              onClick={onToggleMute}
              className="text-[10px] text-zinc-500 hover:text-zinc-300"
            >
              {isMuted ? "Unmute [M]" : "Mute [M]"}
            </button>
            <span className="font-mono text-[10px] text-zinc-500">
              {isMuted ? "0" : Math.round(volume * 100)}%
            </span>
          </div>
        </div>
      )}
    </div>
  );
}