import Link from "next/link";
import { buttonClasses } from "@/components/ui/button";

/**
 * Decorative rotating "seal" badge for the homepage — running text on a
 * circular SVG path, slowly spinning around a static centered CTA button.
 * Purely decorative/branding (not data-driven), per the wireframe's
 * running-text-around-"Get ticket" concept.
 */
export function CircularCtaBadge({
  text = "Jangan Sampai Ketinggalan",
  href = "/events",
  label = "Get Ticket",
}: {
  text?: string;
  href?: string;
  label?: string;
}) {
  // 2 repeats measured to fit the ring's ~578-unit circumference (at
  // radius 92) without the text overrunning past 360° and overlapping
  // itself — 4 repeats measured ~956 units, well over the circle's length,
  // which showed up as garbled/overlapping letters at the wrap seam.
  const repeated = Array(2).fill(text).join(" • ");

  return (
    <div className="relative mx-auto flex h-[min(85vw,650px)] w-[min(85vw,650px)] items-center justify-center">
      <svg viewBox="0 0 200 200" className="absolute inset-0 h-full w-full animate-spin-slow" aria-hidden="true">
        <defs>
          <path id="circular-cta-badge-path" d="M 100,100 m -92,0 a 92,92 0 1,1 184,0 a 92,92 0 1,1 -184,0" />
        </defs>
        <text className="fill-kolabora-neutral-dark text-[11px] font-medium uppercase tracking-[0.2em]">
          <textPath href="#circular-cta-badge-path" startOffset="0%">
            {repeated}
          </textPath>
        </text>
      </svg>
      <Link href={href} className={buttonClasses("primary", "lg")}>
        {label}
      </Link>
    </div>
  );
}