import type { ReactNode } from "react";

/**
 * Tone is a prop rather than an override class: passing `text-zinc-300` on top
 * of the light variant's `text-zinc-500` leaves the winner to stylesheet order,
 * not to the call site, and the badge silently renders unreadable.
 */
const TONES = {
  light:
    "border-white/60 bg-white/40 text-zinc-500 shadow-sm backdrop-blur-md",
  dark: "border-white/15 bg-white/10 text-zinc-300 backdrop-blur-md",
  /** Opaque grey. For sitting over photography, where a translucent fill
   *  takes on whatever is behind it and the label stops being readable. */
  solid: "border-white/10 bg-zinc-700/90 text-white shadow-sm backdrop-blur-md",
} as const;

export default function EyebrowBadge({
  children,
  tone = "light",
  className = "",
}: {
  children: ReactNode;
  tone?: keyof typeof TONES;
  className?: string;
}) {
  return (
    <span
      className={`inline-flex items-center gap-2 rounded-full border px-3 py-1.5 text-[10px] font-medium tracking-wider uppercase ${TONES[tone]} ${className}`}
    >
      <span className="h-1.5 w-1.5 rounded-full bg-gradient-to-r from-amber-500 to-orange-600" />
      {children}
    </span>
  );
}