interface ChannelInfoProps {
  channelNumber: number;
  channelName: string;
  showTitle: string;
  showStartTime: string; // "HH:MM"
  showEndTime: string; // "HH:MM"
  /** Progress through the current show, 0–100 */
  progress: number;
  description?: string;
}

export function ChannelInfo({
  channelNumber,
  channelName,
  showTitle,
  showStartTime,
  showEndTime,
  progress,
  description,
}: ChannelInfoProps) {
  const clampedProgress = Math.min(100, Math.max(0, progress));

  return (
    <div className="flex flex-col gap-2 rounded-lg bg-black/60 p-4 backdrop-blur-md w-80">
      {/* Channel badge */}
      <div className="flex items-center gap-2">
        <span className="flex h-7 min-w-9 items-center justify-center rounded bg-white px-1.5 font-mono text-xs font-bold text-black">
          {channelNumber}
        </span>
        <span className="truncate text-sm font-medium text-zinc-300">
          {channelName}
        </span>
      </div>

      {/* Show title */}
      <p className="text-base font-semibold leading-tight text-white">
        {showTitle}
      </p>

      {/* Description */}
      {description && (
        <p className="line-clamp-2 text-xs text-zinc-400">{description}</p>
      )}

      {/* Progress bar */}
      <div className="flex flex-col gap-1">
        <div className="h-1 w-full overflow-hidden rounded-full bg-zinc-700">
          <div
            className="h-full rounded-full bg-white transition-all duration-500"
            style={{ width: `${clampedProgress}%` }}
          />
        </div>
        <div className="flex justify-between font-mono text-[10px] text-zinc-500">
          <span>{showStartTime}</span>
          <span>{showEndTime}</span>
        </div>
      </div>
    </div>
  );
}

export type { ChannelInfoProps };