interface SectionBadgeProps {
  text: string;
  className?: string;
  variant?: "secondary" | "primary";
}

export default function SectionBadge({
  text,
  className = "",
  variant = "secondary",
}: SectionBadgeProps) {
  const colorClasses =
    variant === "primary"
      ? {
          border: "border-primary-light",
          bg: "bg-primary-light",
          text: "text-primary-light",
        }
      : {
          border: "border-secondary-main",
          bg: "bg-secondary-main",
          text: "text-secondary-main",
        };

  return (
    <div className={`flex items-center gap-1 ${className} py-2.5 md:py-6`}>
      <div
        className={`border-2 ${colorClasses.border} rounded-full md:p-1 p-0.5 flex items-center justify-center`}
      >
        <div className={`${colorClasses.bg} rounded-full w-2 h-2`}></div>
      </div>
      <p
        className={`${colorClasses.text} text-[10px] md:text-[14px] font-normal uppercase`}
      >
        {text}
      </p>
    </div>
  );
}