import { clsx } from '@admin/utils';

export function Switch( { checked, onChange, disabled, label } ) {
	return (
		<button
			type="button"
			role="switch"
			aria-checked={ !! checked }
			aria-label={ label }
			disabled={ disabled }
			onClick={ () => ! disabled && onChange( ! checked ) }
			className={ clsx(
				'relative inline-flex h-6 w-10 shrink-0 rounded-full border-0 p-0 transition-colors',
				disabled ? 'cursor-not-allowed opacity-40' : 'cursor-pointer',
				checked ? 'bg-primary' : 'bg-gray-300'
			) }
		>
			<span
				className={ clsx(
					'absolute top-0.5 left-0.5 size-5 rounded-full bg-white shadow transition-transform',
					checked && 'translate-x-4'
				) }
			/>
		</button>
	);
}