---
const { link, id, Dropdown, New, ...rest } = Astro.props;
---

<div class="nav-item" id={id}>
    <a
        href={Dropdown ? "#" : link}
        class:list={["navigation-link", { new: New }]}
        {...rest}
    >
        <slot />
        {Dropdown && <i class="ri-arrow-down-s-line" />}
    </a>
    {
        Dropdown && (
            <div class="dropdown-content">
                <slot name="dropdown" />
            </div>
        )
    }
</div>

<style type="text/css">
    .nav-item {
        position: relative;
    }

    .navigation-link {
        display: flex;
        align-items: center;
        gap: var(--space-02);
        padding: var(--space-02) var(--space-04);
        color: var(--color-text-dark);
        text-decoration: none;
        text-transform: capitalize;
        transition: var(--transition-01);

        &:hover {
            color: var(--color-accent-02);
        }
    }

    .dropdown-content {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 160px;
        width: max-content;
        padding: var(--space-04) var(--space-02);
        background-color: var(--color-surface-01);
        box-shadow: var(--shadow-00);
        border-radius: var(--radius-02);
        z-index: 2;
    }

    .dropdown-content.active {
        display: block;
    }

    @media screen and (max-width: 768px) {
        .dropdown-content {
            display: none;
            position: relative;
            top: 0%;
            left: 0%;
            width: 100%;
            box-shadow: none;
            border-radius: 0;
            z-index: 2;

            & > div {
                width: 100%;
            }
        }

        .dropdown-content.active {
            position: relative;
            display: flex;
        }
    }
</style>

<script type="module">
    document.addEventListener("DOMContentLoaded", () => {
        document.querySelectorAll(".nav-item").forEach((navItem) => {
            const link = navItem.querySelector(".navigation-link");
            const dropdownContent = navItem.querySelector(".dropdown-content");

            if (dropdownContent) {
                link.addEventListener("click", (event) => {
                    event.preventDefault();

                    dropdownContent.classList.toggle("active");

                    document
                        .querySelectorAll(".dropdown-content")
                        .forEach((dropdown) => {
                            if (dropdown !== dropdownContent) {
                                dropdown.classList.remove("active");
                            }
                        });
                });
            }
        });

        document.addEventListener("click", (event) => {
            if (!event.target.closest(".nav-item")) {
                document
                    .querySelectorAll(".dropdown-content.active")
                    .forEach((dropdown) => {
                        dropdown.classList.remove("active");
                    });
            }
        });
    });
</script>