---
// index.astro
import MainLayout from '../layouts/MainLayout.astro';
import SearchBar from '../components/SearchBar.astro';

const supabaseUrl = import.meta.env.PUBLIC_SUPABASE_URL;
const supabaseKey = import.meta.env.PUBLIC_SUPABASE_ANON_KEY;
---

<MainLayout page="Home">
  <div
    id="supabase-env"
    data-url={supabaseUrl}
    data-key={supabaseKey}
    hidden
  ></div>

  <header class="border-b p-4">
    <h1 class="text-2xl font-bold"><a href="/">Prompt Catalog</a></h1>
    <p class="text-sm mt-1">Save and explore AI prompts</p>
  </header>

  <main class="flex flex-col lg:flex-row">
    <SearchBar allTags={[]} /> <!-- leave empty, we'll hydrate it in JS -->

    <div class="border-b lg:border-b-0 lg:border-l flex-1 flex flex-col overflow-hidden">
      <div class="flex-1 overflow-y-auto px-4 lg:px-6 pt-2 pb-4">
        <div id="prompt-error" class="text-red-500 hidden"></div>
        <div class="border-b mb-4 flex justify-between items-center">
          <h2 id="prompt-count" class="text-xl font-semibold text-gray-300 mb-2"></h2>
          <a href="#filters" class="block lg:hidden bg-blue-600 text-white px-2 py-0 pb-1 mb-2 rounded cursor-pointer hover:bg-blue-700 transition-colors duration-300">Filters &downarrow;</a>
        </div>

        <div id="prompt-container" class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3 items-start">Loading prompts…</div>
      </div>
    </div>
  </main>

  <footer class="border-t p-4 text-center text-sm">
    &copy; {new Date().getFullYear()} Prompt Catalog
  </footer>

  <script type="module" src="/scripts/fetch-prompts.js"></script>
</MainLayout>