const DEFAULT_PHRASES = [
  "Para la cancha. Para después. Para ti.",
  "Club 1976",
  "Clásico. Femenino. Atemporal.",
  "Envíos gratis en Colombia +$200.000",
  "Sporty Elegance",
];

type Props = {
  phrases?: string[];
  className?: string;
  /** denser strip for mid-page use */
  size?: "sm" | "md";
};

export function BrandMarquee({
  phrases = DEFAULT_PHRASES,
  className = "",
  size = "sm",
}: Props) {
  const sequence = [...phrases, ...phrases];
  const pad = size === "md" ? "py-4 md:py-5" : "py-2.5";
  const type =
    size === "md"
      ? "text-[12px] sm:text-[13px] tracking-[0.22em]"
      : "text-[11px] sm:text-[12px] tracking-[0.2em]";

  return (
    <div
      className={`ot-marquee bg-ot-green text-ot-cream ${className}`}
      aria-hidden={false}
      aria-label="OLD TENNIS"
    >
      <div className={`ot-marquee__track ${pad}`}>
        {sequence.map((phrase, i) => (
          <span
            key={`${phrase}-${i}`}
            className={`inline-flex items-center uppercase ${type}`}
          >
            <span className="px-5 sm:px-9">{phrase}</span>
            <span className="text-ot-cream/35 select-none" aria-hidden>
              —
            </span>
          </span>
        ))}
      </div>
    </div>
  );
}