import { Switch } from '@headlessui/react';
import { memo } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { classNames } from '../helpers';
const ToggleSwitch = ( { onChange, value, variant = 'dark' } ) => {
const switchClassNames = {
dark: {
wrapper: [
'w-10',
value ? 'bg-accent-st' : 'bg-zip-dark-theme-border',
],
background: [ value ? 'bg-accent-st' : 'bg-zip-dark-theme-border' ],
switch: [ 'size-5', value ? 'translate-x-5' : 'translate-x-0' ],
},
light: {
wrapper: [ 'w-9', value ? 'bg-accent-st' : 'bg-border-tertiary' ],
background: [ value ? 'bg-accent-st' : 'bg-border-tertiary' ],
switch: [
'size-4',
value ? 'translate-x-[1.15rem]' : 'translate-x-[0.15rem]',
],
},
};
return (