"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import { Mail, Linkedin, Phone } from "lucide-react"
import { cn } from "@/lib/utils"
import { LanguageSwitcher } from "@/components/language-switcher"
import { useLanguage } from "@/components/language-context"
import { useTranslation } from "@/lib/i18n"

export function Navigation() {
  const pathname = usePathname()
  const { currentLang, setCurrentLang } = useLanguage()
  const { t } = useTranslation(currentLang)

  const navItems = [
    { href: "/", label: t("home") },
    { href: "/about", label: t("about") },
    { href: "/portfolio", label: t("portfolio") },
    { href: "/projects", label: t("projects") },
    { href: "/contact", label: t("contact") },
  ]

  return (
    <header className="sticky top-0 z-50 w-full bg-background/80 backdrop-blur-xl border-b border-border/40 shadow-sm">
      <div className="container flex h-20 items-center justify-between px-6 max-w-7xl mx-auto">
        <Link href="/" className="flex items-center space-x-3 group">
          <div className="h-10 w-10 rounded-full bg-gradient-to-br from-primary to-primary/80 shadow-lg group-hover:shadow-xl transition-all duration-300"></div>
          <span className="text-2xl font-bold text-foreground tracking-tight">Nhi Vo</span>
        </Link>

        <div className="flex items-center space-x-8">
          <nav className="flex items-center space-x-8">
            {navItems.map((item) => (
              <Link
                key={item.href}
                href={item.href}
                className={cn(
                  "text-sm font-medium transition-all duration-200 hover:text-primary relative py-2",
                  pathname === item.href
                    ? "text-primary after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:bg-primary after:rounded-full"
                    : "text-muted-foreground hover:text-foreground",
                )}
              >
                {item.label}
              </Link>
            ))}
          </nav>

          {/* Social Icons */}
          <div className="flex items-center space-x-3">
            <a
              href="mailto:nhivo2504@gmail.com"
              className="flex items-center justify-center w-8 h-8 rounded-full bg-muted hover:bg-primary hover:text-primary-foreground transition-all duration-200"
              aria-label="Email Nhi Vo"
            >
              <Mail className="h-3 w-3" />
            </a>
            <a
              href="https://linkedin.com/in/nhiivo"
              target="_blank"
              rel="noopener noreferrer"
              className="flex items-center justify-center w-8 h-8 rounded-full bg-muted hover:bg-primary hover:text-primary-foreground transition-all duration-200"
              aria-label="Connect on LinkedIn"
            >
              <Linkedin className="h-3 w-3" />
            </a>
            <a
              href="tel:+84908372168"
              className="flex items-center justify-center w-8 h-8 rounded-full bg-muted hover:bg-primary hover:text-primary-foreground transition-all duration-200"
              aria-label="Call Nhi Vo"
            >
              <Phone className="h-3 w-3" />
            </a>
          </div>

          <LanguageSwitcher currentLang={currentLang} onLanguageChange={setCurrentLang} />
        </div>
      </div>
    </header>
  )
}