import Link from "next/link";
import { site } from "@/content/site";
import { cn } from "@/lib/utils";

/** One arrow before “Tickets” — avoids the old “→ Tickets →” double-arrow on one side */
export const TICKET_MARQUEE_SEGMENT = "→ Tickets  ";

type MarqueeProps = {
  className?: string;
  onNavigate?: () => void;
  /** Visually hidden label for icon-only / marquee control */
  "aria-label"?: string;
};

/**
 * Gold pill with continuous horizontal marquee — used in header (sm+) and mobile nav sheet.
 */
export function TicketsMarqueeCta({
  className,
  onNavigate,
  "aria-label": ariaLabel = "Get tickets",
}: MarqueeProps) {
  const repeated = Array.from({ length: 8 }, (_, i) => (
    <span key={i} className="shrink-0 px-1 font-bold whitespace-nowrap">
      {TICKET_MARQUEE_SEGMENT}
    </span>
  ));

  return (
    <Link
      href={site.links.ticketsUrl}
      onClick={onNavigate}
      aria-label={ariaLabel}
      className={cn(
        "relative flex items-center overflow-hidden rounded-full bg-[#ffb300] text-[#0f0404]",
        "shadow-md transition-colors hover:bg-[#ffb300]/90",
        "[&:hover_.ticket-menu-marquee]:[animation-duration:6s]",
        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#ffb300] focus-visible:ring-offset-2",
        className
      )}
    >
      <span className="ticket-menu-marquee flex w-max items-center py-2.5">
        {repeated}
        {repeated}
      </span>
    </Link>
  );
}

type Props = {
  className?: string;
  /** Full-width pill (e.g. stacked in a narrow column) */
  fullWidth?: boolean;
};

/** Header / tablet — same marquee as mobile sheet, sized for the navbar */
export function NavTicketsCta({ className, fullWidth }: Props) {
  return (
    <TicketsMarqueeCta
      className={cn(
        "ticket-cta-pulse shrink-0",
        fullWidth
          ? "h-12 w-full min-w-0 max-w-none justify-center"
          : "h-10 min-w-[9.25rem] max-w-[11rem] sm:h-11 sm:min-w-[10rem] sm:max-w-[12rem]",
        className
      )}
    />
  );
}