import { Switch } from '@headlessui/react';

const Toggler = ({ onChange, checked, disabled }) => {
  return (
    <Switch
      disabled={disabled}
      checked={checked}
      onChange={onChange}
      className={`${checked ? 'wmx-bg-primary' : 'wmx-bg-gray-300'}
          wmx-relative wmx-inline-flex wmx-h-5 wmx-w-[34px] wmx-shrink-0 wmx-cursor-pointer wmx-rounded-full wmx-border-2 wmx-border-transparent wmx-transition-colors wmx-duration-200 wmx-ease-in-out focus:wmx-outline-none focus-visible:wmx-ring-2  focus-visible:wmx-ring-white/75`}
    >
      <span
        aria-hidden='true'
        className={`${checked ? 'wmx-translate-x-[14px]' : 'wmx-translate-x-0'}
            wmx-pointer-events-none wmx-inline-block wmx-size-4 wmx-transform wmx-rounded-full wmx-bg-white wmx-ring-0 wmx-transition wmx-duration-200 wmx-ease-in-out`}
      />
    </Switch>
  );
};

export default Toggler;
