import cn from "../../lib/helpers/classnames";
import Link from "../Link";
import type { ComponentPropsWithoutRef } from "react";
import type { LucideIcon } from "lucide-react";

export type MenuItemProps = Omit<ComponentPropsWithoutRef<typeof Link>, "href"> & {
  text?: string;
  href?: string;
  icon?: LucideIcon;
  current?: boolean;
};

const MenuItem = ({ text, href, icon, current, className, ...rest }: MenuItemProps) => {
  const Icon = icon;

  const item = (
    <>
      {Icon && <Icon size="1.25em" className="block h-[1.8em] w-[1.8em] md:h-[1.25em] md:w-[1.25em]" />}
      {text && <span className="ml-3 hidden text-sm leading-none font-medium tracking-[0.02em] md:block">{text}</span>}
    </>
  );

  // allow both navigational links and/or other interactive react components (e.g. the theme toggle)
  if (href) {
    return (
      <Link
        dynamicOnHover
        href={href}
        aria-label={text}
        data-current={current || undefined}
        className={cn(
          "text-medium-dark hover:border-kinda-light -mb-[0.2em] inline-flex items-center p-2.5 hover:border-b-[0.2em] hover:no-underline",
          current && "border-link/40 hover:border-link/40 border-b-[0.2em]",
          className
        )}
        {...rest}
      >
        {item}
      </Link>
    );
  }

  return item;
};

export default MenuItem;