import { cva, VariantProps, cx } from 'class-variance-authority';
import * as RadixSwitch from '@radix-ui/react-switch';
import type { SwitchProps } from '@radix-ui/react-switch';

type SwitchStylesProps = VariantProps<typeof switchStyles>;
const switchStyles = cva(['c-switch-root'], {
  variants: {
    size: {
      xs: 'c-switch-root-xs',
      sm: 'c-switch-root-sm',
    },
  },
  defaultVariants: {
    size: 'sm',
  },
});

export type CustomSwitchProps = SwitchStylesProps &
  Omit<SwitchProps, 'checked'> & {
    checked?: boolean | null;
  };

export function Switch({ size, checked, ...props }: CustomSwitchProps) {
  return (
    <RadixSwitch.Root {...props} checked={checked === null ? false : checked} className={switchStyles({ size })}>
      <RadixSwitch.Thumb className={cx('c-switch-thumb', checked === null ? 'middle-position' : '')} />
    </RadixSwitch.Root>
  );
}
