"use client"

import { useEffect, useState } from "react"
import Link from "next/link"
import { cn } from "@/lib/utils"
import { ThemeSwitch } from "./theme-switch"
import { useTranslations } from "next-intl"
import { LocaleSwitch } from "./locale-switch"

export default function Navbar() {
  const [scrolled, setScrolled] = useState(false);
  const t = useTranslations('pages');

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 10)

    onScroll()

    window.addEventListener("scroll", onScroll)
    return () => window.removeEventListener("scroll", onScroll)
  }, [])

  return (
    <header className="sticky top-0 left-0 w-full z-50 flex justify-center p-10">

      <nav
        className={cn(
          "flex-1 flex items-center justify-between px-7 py-4 rounded-full transition-all duration-700",

          scrolled
            ? [
                "border border-foreground/10",
                "backdrop-blur-xl backdrop-saturate-150",
                "shadow-[0_4px_24px_-4px_hsl(0_0%_0%/0.12),inset_0_1px_0_0_hsl(0_0%_100%/0.12)]",
              ].join(" ")
            : "border-transparent bg-transparent"
        )}
      >
        <h1 className={cn("text-4xl font-medium")}>bH</h1>

        <ul className="flex items-center gap-8 text-sm text-foreground/60">
          <li>
            <Link href="/" className="hover:text-foreground transition">
              {t('home')}
            </Link>
          </li>
          <li>
            <Link href="/about" className="hover:text-foreground transition">
              {t('aboutMe')}
            </Link>
          </li>
          <li>
            <Link href="/projects" className="hover:text-foreground transition">
              {t('projects')}
            </Link>
          </li>
        </ul>
        
        <div className="flex gap-3">
          <ThemeSwitch/>
          <LocaleSwitch/>
        </div>
      </nav>
    </header>
  )
}