import React, { ReactNode } from 'react';
import { Alignment, DataTableCell } from 'app/shared/modules/tables/dataTable/dataTable.types';
import { BaseCell } from 'app/shared/modules/tables/dataTable/dataTableCells';

interface PoolPointsSummaryDataTableCell extends Omit<DataTableCell<string>, 'value' | 'align' > {
  align?: Alignment ;
  value?: string;
  children?: ReactNode;
  operator?: boolean;
}

export const PoolPointsSummaryDataCell = ({ value = '', align = 'left', width, defaultColumnWidth, extraClass, children, operator }: PoolPointsSummaryDataTableCell) => (
  <BaseCell width={width} align={align} defaultColumnWidth={defaultColumnWidth} extraClass={extraClass}>
    {operator && <i className={'icon-plus o-gutter-right--small c-data-table-summary-icon'}/>}
    {value}
    {children}
  </BaseCell>
);