import Link from "next/link";
import type { Prisma } from "@prisma/client";

export type NavItemWithChildren = Prisma.NavItemGetPayload<{
  include: { children: true };
}>;

const PLAIN_CLASS = "text-sm font-medium text-charcoal hover:text-terracotta";
const BUTTON_CLASS =
  "rounded-full bg-terracotta px-4 py-2 text-sm font-medium text-white hover:bg-terracotta/90";

export function NavLink({ item }: { item: NavItemWithChildren }) {
  const className = item.isButtonStyle ? BUTTON_CLASS : PLAIN_CLASS;

  if (item.children.length === 0) {
    return (
      <Link href={item.url} className={className}>
        {item.label}
      </Link>
    );
  }

  return (
    <div className="group relative">
      <Link href={item.url} className={className}>
        {item.label}
      </Link>
      <div className="invisible absolute left-0 top-full z-10 min-w-40 rounded border border-charcoal/20 bg-warm-white py-1 opacity-0 shadow-lg transition-opacity group-hover:visible group-hover:opacity-100">
        {item.children.map((child) => (
          <Link
            key={child.id}
            href={child.url}
            className="block whitespace-nowrap px-4 py-2 text-sm text-charcoal hover:bg-cream hover:text-terracotta"
          >
            {child.label}
          </Link>
        ))}
      </div>
    </div>
  );
}