import { Link } from 'react-router-dom'
import { Menu } from "lucide-react"
import { Button } from "@/components/shadcn/ui/button"
import { Sheet, SheetContent, SheetTrigger } from "@/components/shadcn/ui/sheet"
import { SubMenu } from '@/layout/HeaderMenu'
import LocaleSwitcher from '../i18n/LocaleSwitcher'

const HeaderMenuComponents = ({children}) => {
    return (
      <>
        <header className="flex h-[75px] py-[20px] mb-0 lg:mb-[20px] bg-transparent items-center gap-4 px-4 lg:px-6">
          <Sheet>
            <span className="after:content-[''] relative w-[85px] h-[51px] after:bg-[length:85px_51px] after:absolute after:w-full after:h-full after:top-0 after:left-0 after:bg-[url('../images/313_logo.png')] lg:invisible md:invisible visible top-[5px] left-0"></span>
            <SheetTrigger asChild>
              <Button
                variant="outline"
                size="icon"
                className="group shrink-0 md:hidden bg-transparent border-0 absolute right-4 top-4"
              >
                <Menu className="mobile-menu-icon h-10 w-10 text-white group-hover:text-white" />
              </Button>
            </SheetTrigger>
            <SheetContent side="left" className="flex flex-col">
              <nav className="grid gap-2 text-sm !sm:text-sm">
                <Link
                  to=""
                  className="flex items-center gap-10 font-semibold"
                >
                  <span className="after:content-[''] relative w-[170px] h-[102px] inline-block  after:absolute after:w-full after:h-full after:top-0 after:left-0 after:bg-[url('../images/313_logo.png')]"></span>
                </Link>
                <div className="mt-4">
                  <SubMenu />
                </div>
              </nav>
            </SheetContent>
          </Sheet>
          {children}
          <LocaleSwitcher />
        </header>
      </>
    )
}

export default HeaderMenuComponents