<script>"use strict";
export let defaultChecked = false;
export let checked = defaultChecked;
export let onChange = null;
export let mainLabel = "";
export let caption = "";
export let subheading = "";
export let leftLabel = "";
export let rightLabel = "";
export let size = "md";
export let disabled = false;
export let readonly = false;
function toggle() {
  checked = !checked;
  if (onChange) {
    onChange(checked);
  }
}
</script>

<div class:opacity-30={disabled}>
	{#if mainLabel || caption}
		<div class="flex items-center gap-2 mb-[6px]">
			{#if mainLabel}
				<span class="text-stone-950 text-4xl font-[500]">{mainLabel}</span>
			{/if}
			{#if caption}
				<span class="text-xl text-stone-400">{caption}</span>
			{/if}
		</div>
	{/if}
	<div class="flex gap-2 w-fit items-center">
		{#if leftLabel}
			<span class="text-2xl text-stone-600">
				{leftLabel}
			</span>
		{/if}
		<button
			on:click={disabled || readonly ? null : toggle}
			type="button"
			class="relative inline-flex items-center h-6 w-10 rounded-full transition-colors duration-200 ease-in-out focus:ring-offset-0 focus:ring focus:ring-sky-500"
			class:w-8={size === 'sm'}
			class:h-4={size === 'sm'}
			class:w-12={size === 'md'}
			class:h-6={size === 'md'}
			class:w-14={size === 'lg'}
			class:h-7={size === 'lg'}
			class:bg-blue-600={checked && !readonly}
			class:bg-base-400={!checked && !readonly}
			class:bg-stone-300={!checked && readonly}
			class:bg-stone-500={checked && readonly}
			role="switch"
			aria-checked={checked}
			{disabled}
			{...$$restProps}
		>
			<span
				class="inline-block bg-white rounded-full shadow transition-transform duration-200 ease-in-out"
				class:w-[22px]={size === 'lg'}
				class:h-[22px]={size === 'lg'}
				class:w-[18px]={size === 'md'}
				class:h-[18px]={size === 'md'}
				class:w-[12px]={size === 'sm'}
				class:h-[12px]={size === 'sm'}
				class:translate-x-[18px]={checked && size === 'sm'}
				class:translate-x-[27px]={checked && size === 'md'}
				class:translate-x-[31px]={checked && size === 'lg'}
				class:translate-x-0.5={!checked && size === 'sm'}
				class:translate-x-[3px]={!checked && (size === 'md' || size === 'lg')}
			/>
		</button>
		{#if rightLabel}
			<span class="text-2xl text-stone-600">
				{rightLabel}
			</span>
		{/if}
	</div>
	{#if subheading}
		<span class="text-xl text-stone-400 mt-[6px]">{subheading}</span>
	{/if}
</div>
