shoc-frontend-new/src/components/ui/toggle-segment.tsx

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

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

export type ToggleSegmentProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
  selected: boolean;
  children: ReactNode;
};

export function ToggleSegment({
  selected,
  children,
  className,
  type = "button",
  disabled,
  ...props
}: ToggleSegmentProps) {
  return (
    <button
      type={type}
      disabled={disabled}
      className={cn(
        "h-8 flex-1 cursor-pointer rounded-md text-[12.5px] font-semibold transition-colors",
        selected
          ? "border-2 border-primary bg-primary/10 text-primary"
          : "border border-border bg-background text-muted-foreground hover:bg-muted",
        disabled && "cursor-not-allowed opacity-50",
        className,
      )}
      {...props}
    >
      {children}
    </button>
  );
}