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 (
    <button
      onClick={(e) => action(e)}
      disabled={disabled}
      className={classNames([
        "group flex items-center text-base",
        { "opacity-50": disabled, "cursor-default": !disabled },
        className,
      ])}
    >
      {icon && <div className="mr-2 h-5 w-5">{icon}</div>}
      <span className="px-2 py-2">{caption}</span>
    </button>
    
  );
}