<script lang="ts">
	import HelpLabel from "#components/labels/HelpLabel.svelte";

	export let checked: boolean | null | undefined;
	export let name: string;
	export let label: string;

	export let help: string;
	export let value: string;

</script>

<div class="input-standard">
	<div
		class="grid grid-cols-[40px_1fr] items-center justify-items-start h-[38px] ring-1 ring-black/15 bg-white active:bg-green-100 cursor-pointer"
	>
		<input
			id={name}
			type="checkbox"
			class="checkbox"
			{name}
			bind:checked
			{value}
			data-cy={name}
		/>

		<label class="w-full cursor-pointer" for={name}>{label}</label>
	</div>

	<div class="help-label">
		<HelpLabel>{@html help}</HelpLabel>
	</div>
</div>
