import React from 'react';
import { clsx } from 'clsx';
import * as BaseSwitch from '@radix-ui/react-switch';

import { forwardRef } from '../utils/react';
import { SwitchElement } from './switch-element';
import * as css from './switch.css';

export interface SwitchProps
  extends css.SwitchVariants,
    Omit<BaseSwitch.SwitchProps, 'asChild'> {
  onLabel?: string;
  offLabel?: string;
}

export const Switch = forwardRef<'button', SwitchProps>(function Switch(
  { as, disabled, className, onLabel = 'On', offLabel = 'Off', ...rest },
  ref,
) {
  const switchClass = clsx(className, css.switchStyle({ disabled }));

  return (
    <BaseSwitch.Root
      {...rest}
      className={switchClass}
      ref={ref}
      disabled={disabled}
    >
      <SwitchElement type="on">{onLabel}</SwitchElement>
      <SwitchElement type="off">{offLabel}</SwitchElement>
    </BaseSwitch.Root>
  );
});