import { Menu } from 'lucide-react'
import Link from 'next/link'
import LogoComponent from './logo'

import { Button } from '@/components/ui/button'
import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet'
import { NavLink } from './nav-link'

export function Header() {
  return (
    <header className="w-full md:px-6 py-5">
      <div className="container mx-auto flex justify-between gap-4">
        <Link href="/">
          <LogoComponent width={115} height={32} className="fill-primary" />
        </Link>
        <div className="flex items-center flex-1 lg:flex-none">
          <div className="hidden lg:block">
            <nav className="flex items-start px-2 text-sm font-medium">
              <NavLink variant="ghost" href="/estudantes">
                Para estudantes
              </NavLink>
              <NavLink variant="ghost" href="/profissionais">
                Para profissionais
              </NavLink>

              <NavLink variant="ghost" href="/empresas">
                Para empresas
              </NavLink>
              <NavLink variant="ghost" href="/sobre">
                Conheça a SevenPro
              </NavLink>
              <NavLink variant="ghost" href="/contato">
                Contato
              </NavLink>
            </nav>
          </div>
          <div className="w-full flex items-center gap-4">
            <Button
              asChild
              variant="secondary"
              className="uppercase text-sm mx-auto"
            >
              <Link href="/inscricao">Inscreva-se</Link>
            </Button>
            <div className="flex flex-col">
              <Sheet>
                <SheetTrigger asChild>
                  <Button
                    variant="outline"
                    size="icon"
                    className="shrink-0 lg:hidden"
                  >
                    <Menu className="h-5 w-5" />
                  </Button>
                </SheetTrigger>
                <SheetContent
                  side="right"
                  className="flex flex-col bg-green-700"
                >
                  <nav className="flex flex-col items-end gap-2 mt-4 text-lg font-light uppercase">
                    <NavLink
                      className="hover:bg-gray-50/10"
                      variant="ghost"
                      href="/estudantes"
                    >
                      Para estudantes
                    </NavLink>

                    <NavLink
                      className="hover:bg-gray-50/10"
                      variant="ghost"
                      href="/profissionais"
                    >
                      Para profissionais
                    </NavLink>
                    <NavLink
                      className="hover:bg-gray-50/10"
                      variant="ghost"
                      href="/empresas"
                    >
                      Para empresas
                    </NavLink>
                    <NavLink
                      className="hover:bg-gray-50/10"
                      variant="ghost"
                      href="/sobre"
                    >
                      Conheça a SevenPro
                    </NavLink>
                    <NavLink
                      className="hover:bg-gray-50/10"
                      variant="ghost"
                      href="/contato"
                    >
                      Contato
                    </NavLink>
                  </nav>
                </SheetContent>
              </Sheet>
            </div>
          </div>
        </div>
      </div>
    </header>
  )
}
