import React from 'react';
import { DataRow } from 'app/shared/modules/tables/dataTable/dataTable';
import cx from 'classnames';
import { PoolPointsSummaryDataCell } from './poolPointsSummaryTextCell';

interface Props {
  data: {
    label: string;
    firstValue: string;
    secondValue?: string;
  },
  secondValue?: boolean;
  total?: boolean;
}

export const PoolPointsSummaryRowTotal = ({ data, secondValue, total }:Props) => {
  const cellFontStyle = cx({ 'c-pool-points-summary__text--total-big': total }, 'c-pool-points-summary__text c-pool-points-summary__text--total');

  return (
    <DataRow extraClass='u-margin-bottom--none'>
      <PoolPointsSummaryDataCell value={data.label} defaultColumnWidth={85} extraClass={cellFontStyle} />
      <PoolPointsSummaryDataCell value={data.firstValue} align='right' defaultColumnWidth={8} extraClass={cx(cellFontStyle, 'u-no-wrap')} />
      {secondValue &&
    <PoolPointsSummaryDataCell defaultColumnWidth={7} extraClass={cx(cellFontStyle, 'u-no-wrap u-pool-points__summary--no-left-gutter')} >
      {data.secondValue && <span className='c-pool-points-summary__text'>{`/ ${data.secondValue} PP`}</ span> }
    </ PoolPointsSummaryDataCell>
      }
      {total && <span className={cx(cellFontStyle, 'c-pool-points-summary__text c-pool-points-summary__text--suffix')}> {` PP`}</span>}
    </DataRow>
  );
};