import { ChevronUp, ChevronDown } from "lucide-react";

interface ChannelControlsProps {
  channelNumber: number;
  channelName: string;
  onPrevChannel: () => void;
  onNextChannel: () => void;
}

export function ChannelControls({
  channelNumber,
  channelName,
  onPrevChannel,
  onNextChannel,
}: ChannelControlsProps) {
  return (
    <div className="flex flex-col items-center gap-1 rounded-lg bg-black/60 p-3 backdrop-blur-md">
      <button
        onClick={onNextChannel}
        aria-label="Next channel"
        className="flex h-10 w-10 items-center justify-center rounded-md text-zinc-400 transition-colors hover:bg-zinc-700 hover:text-white active:scale-95"
      >
        <ChevronUp className="h-5 w-5" />
      </button>

      <div className="flex flex-col items-center px-2 py-1 text-center">
        <span className="font-mono text-2xl font-bold tabular-nums text-white leading-none">
          {channelNumber}
        </span>
        <span className="mt-0.5 max-w-20 truncate text-[10px] text-zinc-400">
          {channelName}
        </span>
      </div>

      <button
        onClick={onPrevChannel}
        aria-label="Previous channel"
        className="flex h-10 w-10 items-center justify-center rounded-md text-zinc-400 transition-colors hover:bg-zinc-700 hover:text-white active:scale-95"
      >
        <ChevronDown className="h-5 w-5" />
      </button>
    </div>
  );
}

export type { ChannelControlsProps };