"use client";

import ContentCard from "@/components/ContentCard";
import { Breadcrumb, BreadcrumbList } from "@/components/ui/breadcrumb";
import { Button } from "@/components/ui/button";
import { useApp } from "@/context/app";
import Link from "next/link";
import { useMemo } from "react";
import Item from "./_item";

export default function NavLink() {
  const { header } = useApp();

  const paths = useMemo(() => {
    if (!header) return [];

    let link = `${header.title.link}`;

    return header.title.path.map((path, i) => {
      link += path.link ? `/${path.link}` : "";

      return <Item key={i} path={path} link={link} />;
    });
  }, [header]);

  return (
    <div className="z-10 mx-2 mt-2 flex gap-2">
      <ContentCard className="flex grow items-center gap-2 p-0 text-xs">
        <Link href={header?.title.link ?? "#"}>
          <Button variant="solid" color="primary" className="rounded-r-none">
            {header?.title.text || <>&nbsp;</>}
          </Button>
        </Link>
        <Breadcrumb>
          <BreadcrumbList className="gap-0.5 sm:gap-0.5">
            {paths}
          </BreadcrumbList>
        </Breadcrumb>
      </ContentCard>
      {header?.opt && (
        <ContentCard className="px-2 py-1.5">
          <>{header.opt}</>
        </ContentCard>
      )}
    </div>
  );
}