Neoconstruct Event Banner

import { cn } from "cn"

import {
  Banner,
  BannerContent,
  BannerDismiss,
  BannerLink,
} from "@/components/banner/banner"
import { RibbonBadge } from "@/components/neoconstruct/neoconstruct-badge"
import {
  ArrowRight,
  buttonVariants,
} from "@/components/neoconstruct/neoconstruct-button"

// The copy: change text here, not in the markup.
const COPY = {
  badge: "2 seats left",
  // Replaces badge below the sm breakpoint.
  badgeShort: "2 left",
  news: "October workshop at the Orbcore studio.",
  newsLink: "Reserve a seat",
  // Replaces newsLink below the sm breakpoint, so the banner holds one line.
  newsLinkShort: "Reserve",
} as const

export default function Banner05() {
  return (
    <Banner
      data-theme="neoconstruct"
      className="border-b-3 border-border bg-background py-3 text-foreground"
    >
      <BannerContent>
        <RibbonBadge className="shrink-0">
          <span className="sm:hidden">{COPY.badgeShort}</span>
          <span className="max-sm:hidden">{COPY.badge}</span>
        </RibbonBadge>
        <p className="min-w-0 max-sm:hidden">{COPY.news}</p>
        <BannerLink
          href="#"
          labelOnPhone
          icon={<ArrowRight />}
          className={cn(
            buttonVariants({ size: "sm" }),
            "h-auto min-h-9 font-heading hover:no-underline max-sm:px-3"
          )}
        >
          <span className="sm:hidden">{COPY.newsLinkShort}</span>
          <span className="max-sm:hidden">{COPY.newsLink}</span>
        </BannerLink>
      </BannerContent>
      <BannerDismiss />
    </Banner>
  )
}