import {Switch} from '@headlessui/react';
import './Toggle.scss';

/**
 * Reusable toggle component.
 *
 * @param {object} props - Props: enabled (bool), setEnabled (function), label (string), disabled (bool)
 */
const Toggle = ( {enabled, setEnabled, label, disabled = false} ) => {
	return (
		// Uses the helper components Group and Label from Headless UI
		<Switch.Group as="div" className="adpresso-toggle-container">
			<Switch
				checked={enabled}
				onChange={setEnabled}
				disabled={disabled}
				className={`adpresso-toggle ${enabled ? 'is-active' : ''} ${disabled ? 'is-disabled' : ''}`}
			>
				<span className="adpresso-toggle__thumb"/>
			</Switch>
			{label && <Switch.Label className="adpresso-toggle-label">{label}</Switch.Label>}
		</Switch.Group>
	);
};

export default Toggle;