import { useMemo } from 'react';

import { IconEdit, IconTrash } from '@material-hu/icons/tabler';

import HuMenuList from '@material-hu/components/composed-components/MenuList';

import { useLokaliseTranslation } from 'src/utils/i18n';

type TableActionMenuProps = {
  entityId: number;
  onDelete: (id: number) => void;
  onEdit: () => void;
};

const TableActionMenu = (props: TableActionMenuProps) => {
  const { entityId, onDelete, onEdit } = props;

  const { t } = useLokaliseTranslation('competencies');

  const actionMenuOptions = useMemo(
    () => [
      {
        onClick: () => onEdit(),
        Icon: IconEdit,
        title: t('general:edit'),
      },
      {
        onClick: () => onDelete(entityId),
        Icon: IconTrash,
        title: t('general:delete'),
      },
    ],
    [entityId, t, onDelete, onEdit],
  );

  return (
    <HuMenuList
      options={actionMenuOptions}
      size="small"
      position="right"
    />
  );
};

export default TableActionMenu;