import type { SubtitleTrack } from "./video-player";

interface SubtitlePickerProps {
  tracks: SubtitleTrack[];
  activeTrack: number;
  show: boolean;
  onToggle: () => void;
  onChangeTrack: (id: number) => void;
}

export function SubtitlePicker({
  tracks,
  activeTrack,
  show,
  onToggle,
  onChangeTrack,
}: SubtitlePickerProps) {
  if (tracks.length === 0) return null;
  return (
    <div className="pointer-events-auto relative">
      <button
        className="rounded-md bg-black/50 px-3 py-1.5 text-xs backdrop-blur transition-colors hover:bg-black/70 hover:text-white"
        style={{
          color: activeTrack !== -1 ? "white" : undefined,
          borderBottom:
            activeTrack !== -1 ? "2px solid white" : "2px solid transparent",
        }}
        onClick={onToggle}
      >
        CC
      </button>
      {show && (
        <div className="absolute right-0 top-9 z-30 min-w-[10rem] overflow-hidden rounded-md border border-zinc-700 bg-zinc-900/95 py-1 shadow-xl backdrop-blur">
          <button
            className={`w-full px-3 py-1.5 text-left text-xs transition-colors hover:bg-zinc-700 ${activeTrack === -1 ? "text-white" : "text-zinc-400"}`}
            onClick={() => onChangeTrack(-1)}
          >
            Off
          </button>
          {tracks.map((track) => (
            <button
              key={track.id}
              className={`w-full px-3 py-1.5 text-left text-xs transition-colors hover:bg-zinc-700 ${activeTrack === track.id ? "text-white" : "text-zinc-400"}`}
              onClick={() => onChangeTrack(track.id)}
            >
              {track.name || track.lang || `Track ${track.id + 1}`}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}