import { ReactElement } from 'react';
import clsx from 'clsx';
import * as SwitchPrimitive from '@radix-ui/react-switch';
import { SwitchProps } from '@radix-ui/react-switch';

export const Switch = ({ className, disabled, ...props }: SwitchProps): ReactElement => {
  return (
    <SwitchPrimitive.Root
      className={clsx(
        'bg-neutral-5 relative h-[25px] w-[45px] rounded-full focus:ring disabled:cursor-not-allowed',
        className,
      )}
      disabled={disabled}
      {...props}
    >
      <SwitchPrimitive.Thumb
        className={clsx(
          'bg-neutral-9 block size-[25px] rounded-full border-2 border-transparent transition-all data-[state=checked]:translate-x-5 data-[state=checked]:bg-orange-500 hover:data-[state=checked]:border-orange-800',
          !disabled && 'hover:border-gray-700',
        )}
      />
    </SwitchPrimitive.Root>
  );
};
