---
import { Image } from 'astro:assets';

import NavItem from "./NavItem.astro";

import foscLogo from '../assets/img/fosc-logo-new.png'
---

<div class="navbar bg-base-100 backdrop-blur backdrop-brightness-50 drop-shadow-lg">
    
    <div class="navbar-start">
        <!-- <Image class="h-24 w-auto" src={foscLogo} alt="FOSC Logo"/> -->
        <li><a href="/" class="btn btn-ghost normal-case text-xl font-['Researcher']">FOSC</a></li>
    </div>

    <div class="navbar-center">
        <div class="hidden lg:flex">
            <ul class="menu menu-horizontal px-1">
                <NavItem href="https://cloud.fosc.space" title="Cloud" />
                <NavItem href="https://gallery.fosc.space" title="Gallery" />
                <NavItem href="https://download.fosc.space" title="Downloads" />
                <NavItem href="/blog" title="Blog" />
            </ul>
        </div>

        <div class="hidden sm:flex">
            <div class="dropdown">
                <label tabindex="0" class="btn btn-ghost lg:hidden">
                    ⥐
                </label>
                <ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
                  <li><a>Item 1</a></li>
                  <li>
                    <a>Parent</a>
                    <ul class="p-2">
                      <li><a>Submenu 1</a></li>
                      <li><a>Submenu 2</a></li>
                    </ul>
                  </li>
                  <li><a>Item 3</a></li>
                </ul>
              </div>
        </div>

    </div>



    
    <div class="navbar-end">
        <select  class="select select-ghost" data-choose-theme>
            <option value="">Default</option>
            <option value="light">Light</option>
            <option value="dark">Dark</option>
            <option value="cyberpunk">Cyberpunk</option>
            <option value="black">Black</option>
            <option value="retro">Retro</option>
            <option value="synthwave">Synthwave</option>
          </select>
    </div>


    
</div>
