<script lang="ts">
  /**
   * SearchBar component - Reusable search input with icon
   *
   * @req: UR-007 - Navigate media in library
   * @req: UR-008 - Search media across libraries
   * @req: UR-030 - Quick genre browsing and filtering
   * @req: DR-007 - Library browsing screens (search component)
   * @req: DR-011 - Search bar with cross-library search
   */

  interface Props {
    value: string;
    placeholder?: string;
    onInput: (value: string) => void;
    className?: string;
  }

  let { value, placeholder = "Search...", onInput, className = "" }: Props = $props();

  function handleInput(e: Event) {
    const target = e.target as HTMLInputElement;
    onInput(target.value);
  }
</script>

<div class={`relative ${className}`}>
  <svg
    class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400"
    fill="none"
    stroke="currentColor"
    viewBox="0 0 24 24"
  >
    <path
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="2"
      d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
    />
  </svg>
  <input
    type="text"
    {placeholder}
    {value}
    oninput={handleInput}
    class="w-full pl-10 pr-4 py-3 bg-[var(--color-surface)] border border-gray-700 rounded-lg focus:outline-none focus:border-[var(--color-jellyfin)] text-white placeholder-gray-500"
  />
</div>
