import React from "react"

import { graphql, useStaticQuery } from "gatsby"
import { MenuAlt1Icon } from "@heroicons/react/outline"
import { Logo, Menu } from "@onegeo-suite/gatsby-theme-onegeo"
// import Profil from "./core/Profil"

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

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

    const logo = dataDirectus.directus.site.logo?.imageFile

    return (
        <>
            <div className="navbar bg-base-100 24 h-22 fixed top-0 z-50 shadow">
                <div className="navbar-start">
                    <div className="dropdown lg:hidden">
                        <label tabIndex={0} className="btn btn-ghost ">
                            <MenuAlt1Icon className="h-5 w-5" />
                        </label>
                        <Menu
                            name="header"
                            className="menu menu-compact dropdown-content bg-base-100 rounded-box z-50 mt-3 w-52 p-2 shadow"
                        />
                    </div>
                    <div className="flex flex-shrink-0 items-center">
                        <Logo image={logo} url="/" className="w-10" title="" />
                    </div>
                </div>
                <div className="navbar-center hidden lg:flex">
                    <Menu name="header" className="menu menu-horizontal p-0" />
                </div>

                <div className="navbar-end">
                    {/* ---------------END MENU------------------ }
                    <div className="form-control hidden sm:block">
                        <input
                            type="text"
                            placeholder="Search"
                            className="input input-bordered"
                        />
                    </div>
                    <Profil /> 
                    {---------------END PROFIL------------------ */}
                </div>
            </div>
        </>
    )
}

export default Header