import React from 'react';
import classnames from 'classnames';

export interface ContextMenuItemProp {
  icon?: React.ReactNode;
  title: React.ReactNode;
  desc?: string;
  disabled?: boolean;
  onClick?: () => void;
}

const ContextMenuItem: React.FC<ContextMenuItemProp> = function ({
  icon,
  title,
  desc,
  disabled = false,
  onClick,
}) {
  return (
    <div
      className={classnames(
        'flex justify-start h-8 px-2 items-center text-xs gap-x-1.5 bg-bgColorBase group',
        disabled
          ? 'text-textColorSecondary cursor-not-allowed hover:text-textColorSecondary hover:bg-bgColorDisabled'
          : 'text-textColorBase cursor-pointer hover:text-white hover:bg-primary',
      )}
      onClick={() => !disabled && onClick?.()}>
      <span>{icon}</span>
      <span className="flex-auto">{title}</span>
      <span
        className={classnames(
          'text-textColorSecondary',
          disabled ? 'group-hover:text-textColorSecondary' : 'group-hover:text-white',
        )}>
        {desc}
      </span>
    </div>
  );
};

export default ContextMenuItem;