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

  interface Props {
    id?: string;
    type?: 'color' | 'date' | 'datetime-local' | 'number' | 'tel' | 'text' | 'email';
    value?: string | null;
    label?: string;
    required?: boolean;
    validation?: {
      min?: string;
      max?: string;
      pattern?: string;
      hint: string;
    };
    hidden?: boolean;
    readonly?: boolean;
    disabled?: boolean;

    size?: 'sm';
    dynamicWidth?: boolean;

    notice?: Snippet;
  }

  let {
    id,
    type,
    value = $bindable(),
    label,
    required,
    validation,
    hidden,
    readonly,
    disabled,
    size,
    dynamicWidth,
    notice
  }: Props = $props();
</script>

<fieldset class="fieldset" {hidden}>
  <legend class="fieldset-legend">
    <span>
      {label}
      {#if required}
        <span class="text-red-700">*</span>
      {/if}
    </span>
  </legend>
  <input
    {id}
    name={id}
    bind:value
    class="input"
    class:input-sm={size === 'sm'}
    class:validator={required || validation}
    class:w-full={dynamicWidth}
    type={type || 'text'}
    min={validation?.min}
    max={validation?.max}
    required={required ? true : null}
    pattern={validation?.pattern}
    readonly={readonly ? true : null}
    disabled={disabled ? true : null}
  />
  <p class="fieldset-label">
    {#if notice}
      {@render notice()}
    {/if}
  </p>
  {#if validation}
    <p class="validator-hint mt-0">{validation.hint}</p>
  {/if}
</fieldset>
