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([
        "flex space-x-3 items-center text-left",
        { "opacity-50": disabled, "cursor-pointer": !disabled },
        className,
      ])}
    >
      {icon && <div className="block flex-none">{icon}</div>}
      <span className="block text-base flex-1">{caption}</span>
    </button>
  );
}
