---
import { Icon } from "astro-icon/components";
const bundlePath = `${import.meta.env.BASE_URL}pagefind/`;
---

<div
    class="border border-black bg-white w-full rounded-lg h-10 lg:h-12 relative"
>
    <Icon
        name="magnifying-glass"
        class="absolute size-5 top-1/2 -translate-y-1/2 left-3"
    />
    <div id="pagefind-ui" class="pagefind-init" data-bundle-path={bundlePath}>
    </div>
</div>

<script>
    import { PagefindUI } from "@pagefind/default-ui";

    const element = "#pagefind-ui";
    const selector = document.querySelector(element);

    async function initPagefindUI() {
        if (selector) {
            const bundlePath = selector.getAttribute("data-bundle-path");
            // Pagefind UI configuration options
            // https://pagefind.app/docs/ui/
            new PagefindUI({
                element,
                bundlePath,
                autofocus: true,
                showImages: false,
                pageSize: 5,
            });

            const a =
                selector.querySelector<HTMLInputElement>(`input[type="text"]`);
            console.log(a);
        }
    }

    window.addEventListener("astro:page-load", initPagefindUI);

    if (document.readyState === "loading") {
        document.addEventListener("DOMContentLoaded", initPagefindUI);
    } else {
        initPagefindUI();
    }
</script>