<!-- #region Input [C:2] [TYPE Component] [SEMANTICS input, form, label, error, atom] -->
<!-- @BRIEF Standardized input component with label, error state, and Tailwind styling. -->
<!-- @LAYER UI -->
<!--
@SEMANTICS: input, form-field, ui-atom
@PURPOSE:   Standardized text input component with label and error handling.
@LAYER     Atom
@RELATION  DEPENDS_ON -> [EXT:frontend:Utils]

@UX_STATE: Idle -> Input accepts bound text with optional label.
@UX_STATE: Error -> Inline validation message is rendered beneath the field.
@UX_STATE: Disabled -> Native disabled state prevents editing while preserving value visibility.

@INVARIANT: Consistent spacing and focus states.
-->

<script lang="ts">
  // [SECTION: IMPORTS]
  import { cn } from "$lib/utils.js";
  // [/SECTION: IMPORTS]

  // Deterministic ID counter (hydration-safe, no Math.random)
  let _inputSeq = 0;

  // [SECTION: PROPS]
  let {
    label = "",
    value = $bindable(""),
    placeholder = "",
    error = "",
    disabled = false,
    type = "text",
    id: externalId,
    class: className = "",
    ...rest
  } = $props();

  let id = externalId ?? `input-${++_inputSeq}`;
</script>

<!-- [SECTION: TEMPLATE] -->
<div class="flex flex-col gap-1.5 w-full">
  {#if label}
    <label for={id} class="text-sm font-medium text-text">
      {label}
    </label>
  {/if}

  <input
    {id}
    {type}
    {placeholder}
    {disabled}
    bind:value
    class={cn(
      "flex h-10 w-full rounded-md border border-border-strong bg-surface-card px-3 py-2 text-sm text-text ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-text-subtle focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
      error ? "border-destructive" : "",
      className,
    )}
    {...rest}
  />

  {#if error}
    <span class="text-xs text-destructive">{error}</span>
  {/if}
</div>
<!-- [/SECTION: TEMPLATE] -->

<!-- #endregion Input -->
