/**
 * SegmentedControl variants - cva token-only styling.
 */

import { cva } from 'class-variance-authority';

/** Outer container */
export const segmentedControlVariants = cva(
  'relative inline-flex rounded-md border border-border-default bg-surface-inset p-0.5',
  {
    variants: {
      size: {
        sm: 'gap-0.5',
        md: 'gap-0.5',
      },
    },
    defaultVariants: {
      size: 'md',
    },
  },
);

/** Individual option button */
export const segmentedOptionVariants = cva(
  [
    'relative z-[1] flex flex-1 items-center justify-center',
    'rounded font-medium',
    'transition-colors motion-reduce:transition-none',
    'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1',
    'focus-visible:outline-brand-primary-600',
    'select-none cursor-pointer',
    'disabled:cursor-not-allowed disabled:opacity-50',
  ].join(' '),
  {
    variants: {
      size: {
        sm: 'px-2 py-1 text-xs',
        md: 'px-3 py-1.5 text-sm',
      },
      selected: {
        true: 'text-text-primary',
        false: 'text-text-secondary hover:text-text-primary hover:bg-surface-base/60',
      },
    },
    defaultVariants: {
      size: 'md',
      selected: false,
    },
  },
);