<script lang="ts">
    import {
        Navbar,
        NavbarBrand,
        NavbarToggler,
        NavItem,
        Nav,
        NavLink,
        Collapse,
    } from "@sveltestrap/sveltestrap";

    let isOpen: boolean = $state(false);
    let theme = $state(localStorage.getItem("theme") ?? "light");
    const toggleTheme = () => {
        theme = theme === "light" ? "dark" : "light";
        document.body.setAttribute("data-bs-theme", theme);
        localStorage.setItem("theme", theme);
    };
</script>

<Navbar class="border-bottom" container="xxl" expand="md" color="dark-subtle">
    <NavbarBrand href="/">AlquilaFacil</NavbarBrand>
    <div>
        <button
            class="badge btn"
            onclick={toggleTheme}
            style="background-color: cadetblue;"
        >
            {#if theme === "light"}
                <img src="/toggle-left.svg" alt="" />
            {:else}
                <img src="/toggle-right.svg" alt="" />
            {/if}
        </button>
    </div>
    <NavbarToggler on:click={() => (isOpen = !isOpen)} />
    <Collapse {isOpen} navbar expand="md">
        <Nav class="ms-auto" navbar>
            <NavItem>
                <NavLink href="/">Login</NavLink>
            </NavItem>
            <NavItem>
                <NavLink href="/Info">Preguntas Frecuentes</NavLink>
            </NavItem>
        </Nav>
    </Collapse>
</Navbar>
