interface QualityPickerProps {
  quality: string;
  options: { value: string; label: string }[];
  showPicker: boolean;
  onToggle: () => void;
  onChangeQuality: (q: string) => void;
}

export function QualityPicker({
  quality,
  options,
  showPicker,
  onToggle,
  onChangeQuality,
}: QualityPickerProps) {
  return (
    <div className="pointer-events-auto relative">
      <button
        className="rounded-md bg-black/50 px-3 py-1.5 text-xs text-zinc-400 backdrop-blur transition-colors hover:bg-black/70 hover:text-white"
        onClick={onToggle}
        title="Stream quality"
      >
        {options.find((o) => o.value === quality)?.label ?? quality}
      </button>
      {showPicker && (
        <div className="absolute right-0 top-9 z-30 min-w-[8rem] overflow-hidden rounded-md border border-zinc-700 bg-zinc-900/95 py-1 shadow-xl backdrop-blur">
          {options.map((opt) => (
            <button
              key={opt.value}
              className={`w-full px-3 py-1.5 text-left text-xs transition-colors hover:bg-zinc-700 ${quality === opt.value ? "text-white" : "text-zinc-400"}`}
              onClick={() => onChangeQuality(opt.value)}
            >
              {opt.label}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}