import Link from "next/link";
import { ArrowRight } from "lucide-react";
import { site } from "@/content/site";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

type Props = {
  className?: string;
  /** Full-width style for mobile sheet */
  fullWidth?: boolean;
};

export function NavTicketsCta({ className, fullWidth }: Props) {
  return (
    <Button
      className={cn(
        "rounded-full bg-[#ffb300] font-semibold text-[#0f0404] hover:bg-[#ffb300]/90",
        "ticket-cta-pulse",
        fullWidth ? "w-full" : "px-5 text-sm",
        className
      )}
      asChild
    >
      <Link href={site.links.ticketsUrl}>
        <span className="ticket-cta-text">Tickets</span>
        <ArrowRight className="ticket-cta-arrow size-4" aria-hidden />
      </Link>
    </Button>
  );
}