"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 { appNavigator } from "@/app.config";
import { cn } from "@/lib/utils";

function Navbar() {
  const pathname = usePathname();
  const isActive = (path: string) => pathname === path.replace(/\/#/g, "");
  return (
    <div className="w-full fixed top-0 right-0 left-0 z-50">
      <nav className="container p-4 flex justify-between items-center navbar">
        <div className="flex items-center gap-4">
          <Link
            className="text-sm hidden md:block"
            href={`mailto:${process.env.NEXT_PUBLIC_EMAIL}`}
          >
            {process.env.NEXT_PUBLIC_EMAIL}
          </Link>
          {!isActive("/contact") && (
            <Button asChild size={"sm"} className="hidden md:flex">
              <Link href={"/contact"}>Work with me</Link>
            </Button>
          )}
        </div>

        <Breadcrumb>
          <BreadcrumbList>
            {appNavigator.map(({ label, path }, idx) => (
              <div key={path} className="flex items-center gap-2">
                <BreadcrumbItem>
                  <BreadcrumbLink
                    className={cn(isActive(path) && "text-foreground")}
                    href={path}
                  >
                    {label}
                  </BreadcrumbLink>
                </BreadcrumbItem>
                {idx + 1 < appNavigator.length && (
                  <BreadcrumbSeparator>
                    <span>/</span>
                  </BreadcrumbSeparator>
                )}
              </div>
            ))}
          </BreadcrumbList>
        </Breadcrumb>
      </nav>
    </div>
  );
}

export default Navbar;