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

import { Button } from '@/components/ui/button'
import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet'

export function NavLink() {
  return (
    <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">
          <Button asChild variant="ghost">
            <Link href="#">Para estudantes</Link>
          </Button>
          <Button asChild variant="ghost">
            <Link href="#">Para profissionais</Link>
          </Button>
          <Button asChild variant="ghost">
            <Link href="#">Para empresas</Link>
          </Button>
          <Button asChild variant="ghost">
            <Link href="#">Conheça a SevenPro</Link>
          </Button>
          <Button asChild variant="ghost">
            <Link href="#">Contato</Link>
          </Button>
        </nav>
      </div>
      <div className="w-full flex items-center gap-4">
        <Button
          asChild
          variant="secondary"
          className="uppercase text-sm mx-auto"
        >
          <Link href="#">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" />
                <span className="sr-only">Toggle navigation menu</span>
              </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">
                <Button asChild variant="ghost" className="hover:bg-gray-50/10">
                  <Link href="#">Para estudantes</Link>
                </Button>
                <Button asChild variant="ghost" className="hover:bg-gray-50/10">
                  <Link href="#">Para profissionais</Link>
                </Button>
                <Button asChild variant="ghost" className="hover:bg-gray-50/10">
                  <Link href="#">Para empresas</Link>
                </Button>
                <Button asChild variant="ghost" className="hover:bg-gray-50/10">
                  <Link href="#">Conheça a SevenPro</Link>
                </Button>
                <Button asChild variant="ghost" className="hover:bg-gray-50/10">
                  <Link href="#">Contato</Link>
                </Button>
              </nav>
            </SheetContent>
          </Sheet>
        </div>
      </div>
    </div>
  )
}
