interface BrandedTagProps {
  text: string;
  className?: string;
  textColor?: string;
  variant?: "default" | "white" | "next-steps";
}

export function BrandedTag({
  text,
  className = "",
  textColor,
  variant = "default",
}: BrandedTagProps) {
  let baseClass = "branded-tag-system";
  let defaultTextColor = "#26231A"; // Default to black

  if (variant === "white") {
    baseClass = "branded-tag-system-white";
    defaultTextColor = "#ffffff"; // White text for dark backgrounds
  } else if (variant === "next-steps") {
    baseClass = "branded-tag-system-next-steps";
    defaultTextColor = "#26231A"; // Brand black for NEXT STEPS
  }

  return (
    <div
      className={`${baseClass} ${className}`}
      style={{ marginBottom: "20px" }}
    >
      <div className="dot" />
      <span
        className="text"
        style={{
          color: textColor || defaultTextColor,
          fontFamily: "var(--font-family-base)",
        }}
      >
        {text}
      </span>
    </div>
  );
}