import classNames from "classnames";
import React from "react";

type Props = {
  action: Function;
  caption: string;
  disabled?: boolean;
  icon?: React.ReactNode;
  className?: string | undefined;
};

export default function ContextMenuAction({
  action,
  caption,
  disabled,
  icon,
  className,
}: Props) {
  return (
    <a
      href="#"
      onClick={(e) => action(e)}
      className={classNames([
        "group flex px-2 rounded items-center text-base hover:bg-gray-100",
        className,
      ])}
    >
      {icon && <div className="mr-2 h-5 w-5">{icon}</div>}
      <span className="px-2 py-2">{caption}</span>
    </a>
  );
}