import { cn } from "@/lib/utils";

interface PlaybackPageIndicatorProps {
  total: number;
  current: number;
  onGoTo: (index: number) => void;
}

export function PlaybackPageIndicator({
  total,
  current,
  onGoTo,
}: PlaybackPageIndicatorProps) {
  if (total === 0) return null;

  return (
    <div className="flex w-full items-center gap-0.5 px-1">
      {Array.from({ length: total }, (_, i) => (
        <button
          key={i}
          onClick={(e) => {
            e.stopPropagation();
            onGoTo(i);
          }}
          className="group relative h-3 flex-1"
        >
          {/* Track */}
          <div
            className={cn(
              "absolute inset-x-0 top-1 h-1 rounded-full transition-all",
              i <= current ? "bg-white/90" : "bg-white/30",
              "group-hover:h-1.5 group-hover:top-0.5",
            )}
          />
        </button>
      ))}
    </div>
  );
}
