"use client";
import { DesktopNavbar } from "./desktop-navbar";
import { MobileNavbar } from "./mobile-navbar";
import { motion } from "framer-motion";
import { useLanguage } from "@/context/language-provider";
import { LanguageSwitcher } from "@/components/language-switcher";

interface NavItem {
  title: string;
  link: string;
}

export function NavBar() {
  const { t } = useLanguage();

  const navItems: NavItem[] = [
    {
      title: t("home"),
      link: "/",
    },
    {
      title: t("report"),
      link: "#report",
    },
    {
      title: t("safety"),
      link: "#safety",
    },
  ];
  return (
    <motion.nav
      initial={{
        y: -80,
      }}
      animate={{
        y: 0,
      }}
      transition={{
        ease: [0.6, 0.05, 0.1, 0.9],
        duration: 0.8,
      }}
      className="max-w-7xl fixed top-4 mx-auto inset-x-0 z-50 w-[95%] lg:w-full"
    >
      <div className="hidden lg:block w-full">
        <div className="flex items-center justify-between">
          <DesktopNavbar navItems={navItems} />
          <div className="fixed right-10 top-7 z-[60]">
            <LanguageSwitcher />
          </div>
        </div>
      </div>
      <div className="flex h-full w-full items-center lg:hidden">
        <MobileNavbar navItems={navItems} />
        <div className="ml-auto mr-4">
          <LanguageSwitcher />
        </div>
      </div>
    </motion.nav>
  );
}