'use client'

import { ThemeSwitcher } from '@/components/theme-switcher'
import { Button } from '@/components/ui/button'
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetTrigger,
} from '@/components/ui/sheet'
import { useThemeClient } from '@/hooks/useThemeClient'
import { Menu } from 'lucide-react'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import LogoComponent from './logo'
import { NavLink } from './nav-link'

export function Header() {
  const pathname = usePathname()
  const themeConfig = useThemeClient()

  const color =
    pathname === '/' || themeConfig === 'dark' ? '#fafafa' : '#1C1C1C'

  return (
    <header
      className={`w-full md:px-6 py-5 overflow-hidden ${pathname === '/' && 'absolute z-50 text-gray-50'}`}
    >
      <div className="container mx-auto flex justify-between gap-4">
        <Link href="/">
          <LogoComponent width={115} height={32} fill={color} color="#007D77" />
        </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 +
              </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>
            <ThemeSwitcher className="hidden sm:block" />
            <div className="flex flex-col">
              <Sheet>
                <SheetTrigger asChild>
                  <Button
                    variant="ghost"
                    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="text-gray-50 hover:bg-gray-50/10"
                      variant="ghost"
                      href="/estudantes"
                    >
                      <SheetClose className="uppercase">
                        Para estudantes
                      </SheetClose>
                    </NavLink>

                    <NavLink
                      className="text-gray-50 hover:bg-gray-50/10"
                      variant="ghost"
                      href="/profissionais"
                    >
                      <SheetClose className="uppercase">
                        Para profissionais
                      </SheetClose>
                    </NavLink>

                    <NavLink
                      className="text-gray-50 hover:bg-gray-50/10"
                      variant="ghost"
                      href="/empresas"
                    >
                      <SheetClose className="uppercase">
                        Para empresas
                      </SheetClose>
                    </NavLink>

                    <NavLink
                      className="text-gray-50 hover:bg-gray-50/10"
                      variant="ghost"
                      href="/sobre"
                    >
                      <SheetClose className="uppercase">Conheça +</SheetClose>
                    </NavLink>

                    <NavLink
                      className="text-gray-50 hover:bg-gray-50/10"
                      variant="ghost"
                      href="/contato"
                    >
                      <SheetClose className="uppercase">Contato</SheetClose>
                    </NavLink>
                    <ThemeSwitcher className="text-gray-50" />
                  </nav>
                </SheetContent>
              </Sheet>
            </div>
          </div>
        </div>
      </div>
    </header>
  )
}
