---
// SearchBar.astro

// TODO: Add options for AND/OR switching and sort by options
---

<div class="w-64 border-r h-full p-4 text-gray-100">
  <a href="/add" id="add-prompt" class="block w-fit bg-green-600 text-white px-4 py-2 mb-4 rounded hover:bg-green-700 transition-colors duration-300">
    Add Prompt
  </a>

  <form id="filter-form" method="GET">
    <div>
      <label for="q" class="block text-lg font-semibold mb-1">Search</label>
      <input
        name="q"
        id="q"
        type="text"
        placeholder="Search prompts..."
        class="w-full p-2 border rounded bg-gray-300 text-gray-800 focus:outline-none focus:ring"
      />
    </div>

    <div class="my-4 flex flex-col gap-8 items-start">
      <div>
        <label for="type" class="block text-lg font-semibold mb-1">Type</label>
        <select name="type" id="type" class="border p-2 rounded w-full bg-gray-800">
          <option value="">All</option>
          <option value="System">System</option>
          <option value="Task">Task</option>
        </select>
      </div>

      <div>
        <fieldset class="flex flex-col">
          <legend class="block text-lg font-semibold mb-1">Tags</legend>
          <div class="flex flex-wrap gap-2 max-w-[30rem]">
            {Astro.props.allTags.map((tag: string) => (
              <label class="relative inline-flex items-center cursor-pointer">
                <input
                  type="checkbox"
                  name="tag"
                  value={tag}
                  class="sr-only peer"
                />
                <span class="px-3 py-1 pt-0 rounded-full border border-gray-300 peer-checked:bg-blue-600 peer-checked:text-white hover:bg-blue-600 hover:text-white transition-colors duration-300 text-sm">
                  {tag}
                </span>
              </label>
            ))}
          </div>
        </fieldset>
      </div>
    </div>

    <button id="clear-filters"type="button" class="bg-blue-600 text-white px-4 py-2 rounded cursor-pointer hover:bg-blue-700 transition-colors duration-300">
      Reset Filters
    </button>
  </form>
</div>