import { ArrowRight } from "lucide-react";

interface UpNextBannerProps {
  nextShowTitle: string;
  /** Minutes remaining until the next show */
  minutesUntil: number;
  nextShowStartTime: string; // "HH:MM"
}

export function UpNextBanner({
  nextShowTitle,
  minutesUntil,
  nextShowStartTime,
}: UpNextBannerProps) {
  const timeLabel =
    minutesUntil <= 1 ? "Starting now" : `In ${minutesUntil} min`;

  return (
    <div className="flex w-full items-center gap-3 rounded-lg bg-black/70 px-5 py-3 backdrop-blur-md">
      {/* Label */}
      <div className="flex shrink-0 flex-col">
        <span className="text-[10px] font-semibold uppercase tracking-widest text-zinc-500">
          Up Next
        </span>
        <span className="font-mono text-xs text-zinc-400">{timeLabel}</span>
      </div>

      <div className="h-8 w-px shrink-0 bg-zinc-700" />

      {/* Show info */}
      <div className="flex min-w-0 flex-1 items-center gap-2">
        <ArrowRight className="h-4 w-4 shrink-0 text-zinc-500" />
        <p className="truncate text-sm font-medium text-white">{nextShowTitle}</p>
        <span className="ml-auto shrink-0 font-mono text-xs text-zinc-500">
          {nextShowStartTime}
        </span>
      </div>
    </div>
  );
}

export type { UpNextBannerProps };