import type { ComponentProps } from 'react';
import { cva, VariantProps } from 'class-variance-authority';
import * as RadixSwitch 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 SwitchProps = ComponentProps<typeof RadixSwitch.Root> & SwitchStylesProps;

export function Switch({ size, ...props }: SwitchProps) {
  return (
    <RadixSwitch.Root {...props} className={switchStyles({ size })}>
      <RadixSwitch.Thumb className="c-switch-thumb" />
    </RadixSwitch.Root>
  );
}
