<script lang="ts">
  /** @type {{ value: string; label: string }[]} */
  let {
    options = [],
    value = $bindable(''),
    label = '',
    placeholder = 'Bitte wählen',
    disabled = false,
  } = $props();

  const selectId = $derived(`select-${Math.random().toString(36).slice(2)}`);
</script>

<div>
  {#if label}
    <label
      for={selectId}
      class="mb-1.5 block text-sm font-medium text-stein-700"
    >
      {label}
    </label>
  {/if}
  <div class="relative">
    <select
      id={selectId}
      bind:value
      {disabled}
      class="h-12 w-full appearance-none rounded-lg border border-stein-300 bg-white px-4 py-3 pr-10 text-base text-stein-800 outline-none hover:border-stein-400 focus:border-wald-500 focus:ring-2 focus:ring-wald-100 disabled:bg-stein-100 disabled:opacity-60"
    >
      <option value="" disabled>{placeholder}</option>
      {#each options as opt}
        <option value={opt.value}>{opt.label}</option>
      {/each}
    </select>
    <span
      class="pointer-events-none absolute right-3 top-1/2 h-5 w-5 -translate-y-1/2 text-stein-500"
      aria-hidden="true"
    >
      <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </span>
  </div>
</div>
