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 softBg = selected
    ? (selectedBg ?? `color-mix(in srgb, ${dotColor} 18%, transparent)`)
    : `color-mix(in srgb, ${dotColor} 10%, transparent)`;

  const pillStyle: CSSProperties = {
    background: softBg,
    ...style,
  };

  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",
        disabled && "cursor-not-allowed opacity-50",
        className,
      )}
      style={pillStyle}
      {...props}
    >
      <span className="size-[7px] shrink-0 rounded-full" style={{ background: dotColor }} />
      <span className="text-xs font-medium" style={{ color: selectedText ?? dotColor }}>
        {label}
      </span>
    </button>
  );
}