"use client";
import React from "react";
import { Button } from "@/ui/button";
import Link from "next/link";
import { usePathname } from "next/navigation";

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { cn } from "@/lib/utils";
import LocaleSwitcher from "./locale-switcher";
import { useTranslations } from "next-intl";

export default function Navbar() {
  const pathname = usePathname();
  const isActive = (path: string) => pathname === path.replace(/\/#/g, "");
  const t = useTranslations();
  const navigation = [
    {
      label: t("global.navbar.home"),
      path: "/",
    },
    {
      label: t("global.navbar.projects"),
      path: "/projects",
    },
    {
      label: t("global.navbar.work"),
      path: "/contact",
      isButton: true,
    },
  ];
  return (
    <div className="w-full fixed top-0 right-0 left-0 z-50">
      <nav className="container p-4 flex items-center navbar">
        <div className="items-center gap-4 hidden sm:flex">
          <LocaleSwitcher />
        </div>

        <Breadcrumb className="ml-auto">
          <BreadcrumbList>
            {navigation.map(({ label, path, isButton }, idx) => {
              return (
                <div key={path} className="flex items-center gap-2">
                  <BreadcrumbItem>
                    {isButton ? (
                      <Button
                        asChild
                        size={"sm"}
                        variant={isActive(path) ? "outline" : "default"}
                      >
                        <Link href={path}>{label}</Link>
                      </Button>
                    ) : (
                      <BreadcrumbLink
                        className={cn(isActive(path) && "text-foreground")}
                        href={path}
                      >
                        {label}
                      </BreadcrumbLink>
                    )}
                  </BreadcrumbItem>
                  {idx + 1 < navigation.length && (
                    <BreadcrumbSeparator>
                      <span>/</span>
                    </BreadcrumbSeparator>
                  )}
                </div>
              );
            })}
          </BreadcrumbList>
        </Breadcrumb>
      </nav>
    </div>
  );
}