import React from "react"
import Logo from "./core/Logo"
import Menu from "./core/Menu"
import MenuMobile from "./core/MenuMobile"
import Profil from "./core/Profil"
import { graphql, useStaticQuery } from "gatsby"

interface IHeader {
    className?: string
    logo?: any
}

const Header = (props: IHeader) => {
    const dataDirectus = useStaticQuery(graphql`
        query getLogoHeader {
            directus {
                site {
                    logo {
                        id
                    }
                }
            }
        }
    `)

    const idLogo = dataDirectus.directus.site.logo?.id

    const url = "#"
    return (
        <>
            <div className="navbar bg-neutral  sticky top-0">
                <div className="navbar-start">
                    <div className="dropdown">
                        <label tabIndex={0} className="btn btn-ghost lg:hidden">
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                className="h-5 w-5"
                                fill="none"
                                viewBox="0 0 24 24"
                                stroke="currentColor"
                            >
                                <path
                                    strokeLinecap="round"
                                    strokeLinejoin="round"
                                    strokeWidth="2"
                                    d="M4 6h16M4 12h8m-8 6h16"
                                />
                            </svg>
                        </label>
                        {/* ---------------MENU MOBILE------------------ */}
                        <MenuMobile />
                        {/* ---------------END MENU MOBILE------------------ */}
                    </div>
                    {/*----------------- LOGO --------------------------*/}
                    <div className="flex-shrink-0 flex items-center">
                        <Logo 
                            image={`${process.env.DIRECTUS_URL}assets/${idLogo}`} 
                            url={url} 
                            className="w-10" 
                        />
                    </div>
                    {/*-----------------END LOGO --------------------------*/}
                </div>
                {/* ---------------MENU------------------ */}
                <div className="navbar-center hidden lg:flex">
                    <Menu name="header" className="text-base-100" />
                </div>
                {/* ---------------END MENU------------------ */}
                <div className="navbar-end">
                    <div className="form-control hidden sm:block">
                        <input
                            type="text"
                            placeholder="Search"
                            className="input input-bordered"
                        />
                    </div>
                    {/* ---------------PROFIL------------------ */}
                    <Profil />
                    {/* ---------------END PROFIL------------------ */}
                </div>
            </div>
        </>
    )
}

export default Header