import {
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuTrigger,
} from "@/shared/ui/navigation-menu";
import { MenuItem } from "../lib/model";
import SubMenuLink from "./SubMenuLink";
import { Link } from "@/shared/config/i18n/navigation";
import { useTranslations } from "next-intl";
import { Button } from "@/shared/ui/button";
import { cn } from "@/shared/lib/utils";

const RenderMenuItem = (item: MenuItem) => {
  const t = useTranslations("");
  if (item.items) {
    return (
      <NavigationMenuItem key={t(item.title)}>
        <NavigationMenuTrigger className={"text-md"}>
          {t(item.title)}
        </NavigationMenuTrigger>
        <NavigationMenuContent className="bg-popovertext-popover-foreground min-w-[400px]!">
          {item.items.map((subItem) => (
            <NavigationMenuLink asChild key={subItem.title} className="w-80">
              <SubMenuLink item={subItem} />
            </NavigationMenuLink>
          ))}
        </NavigationMenuContent>
      </NavigationMenuItem>
    );
  }

  return (
    <NavigationMenuItem key={t(item.title)}>
      <NavigationMenuLink
        className={cn(item.type == "button" && "hover:bg-muted hover:text-accent-foreground", "group inline-flex h-10 w-max items-center justify-center rounded-md px-4 py-2 text-md font-medium transition-colors")}
        asChild
      >
        {item.type == "button" ? (
          <Button asChild variant={"default"}>
            <Link href={item.url}>{t(item.title)}</Link>
          </Button>
        ) : (
          <Link href={item.url}>{t(item.title)}</Link>
        )}
      </NavigationMenuLink>
    </NavigationMenuItem>
  );
};

export default RenderMenuItem;
