<script lang="ts">
  import type { Snippet } from 'svelte';

  interface Props {
    id?: string;
    checked?: boolean | null;
    required?: boolean;
    validation?: {
      hint: string;
    };
    disabled?: boolean;

    label?: Snippet | string;
    notice?: Snippet;
  }

  let { id, checked = $bindable(), required, validation, disabled, label, notice }: Props = $props();
</script>

<fieldset class="fieldset">
  <div class="flex items-center">
    <input
      {id}
      name={id}
      bind:checked
      type="checkbox"
      class="checkbox"
      class:validator={required || validation}
      required={required ? true : null}
      disabled={disabled ? true : null}
    />
    <span class="ml-1">
      {#if typeof label === 'string'}
        <span>{label}</span>
      {:else if label}
        {@render label()}
      {/if}
      {#if required}
        <span class="text-red-700">*</span>
      {/if}
    </span>
  </div>
  <p class="fieldset-label">
    {#if notice}
      {@render notice()}
    {/if}
  </p>
  {#if validation}
    <p class="validator-hint mt-0">{validation.hint}</p>
  {/if}
</fieldset>
