import { twJoin } from "tailwind-merge";

import type { MenuItemProps } from "./MenuItem";

const namedTextColor = {
  main: "text-N700",
  danger: "text-R400",
  action: "text-B400",
};

const namedBgColor = {
  main: "hover:bg-N20 focus-visible:bg-N20",
  danger:
    "hover:bg-R50 focus-visible:bg-R50 hover:bg-opacity-[0.6] focus-visible:bg-opacity-[0.6]",
  action:
    "hover:bg-B75 focus-visible:bg-B75 hover:bg-opacity-[0.32] focus-visible:bg-opacity-[0.32]",
};

export function useMenuItemStyles({
  color,
  disabled,
}: Required<Pick<MenuItemProps, "color" | "disabled">>) {
  const classes = {
    root: twJoin(
      "p-8 rounded-6 items-start leading-200 min-h-[unset]",
      namedTextColor[color],
      "aria-disabled:opacity-100 aria-disabled:cursor-not-allowed aria-disabled:pointer-events-auto aria-disabled:text-N60",
      !disabled && namedBgColor[color],
      "aria-disabled:hover:bg-transparent"
    ),
    selected: "bg-transparent hover:bg-N20",
  };

  return classes;
}
