shoc-frontend-new/src/components/ui/dot-toggle-pill.tsx

import type { ButtonHTMLAttributes, CSSProperties } from "react";

import { cn } from "@/lib/utils";

export type DotTogglePillProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
  label: string;
  dotColor: string;
  selected: boolean;
  selectedBg?: string;
  selectedText?: string;
};

export function DotTogglePill({
  label,
  dotColor,
  selected,
  selectedBg,
  selectedText,
  className,
  type = "button",
  disabled,
  style,
  ...props
}: DotTogglePillProps) {
  const selectedStyle: CSSProperties | undefined =
    selected && selectedBg ? { background: selectedBg } : undefined;

  return (
    <button
      type={type}
      disabled={disabled}
      className={cn(
        "inline-flex h-[26px] cursor-pointer items-center gap-1.5 rounded-full border px-2.5 transition-colors",
        selected ? "border-primary" : "border-border bg-background",
        disabled && "cursor-not-allowed opacity-50",
        className,
      )}
      style={{ ...selectedStyle, ...style }}
      {...props}
      aria-pressed={selected}
    >
      <span className="size-[7px] shrink-0 rounded-full" style={{ background: dotColor }} />
      <span
        className={cn("text-xs font-medium", !selected && "text-muted-foreground")}
        style={selected && selectedText ? { color: selectedText } : undefined}
      >
        {label}
      </span>
    </button>
  );
}