import { Figures } from 'app/shared/components/infoBox/infoBox';
import { InfoBoxGroup } from 'app/shared/components/infoBox/infoBoxGroup';
import React from 'react';
import { useSelector } from 'react-redux';
import { selectPoolPointsKeyFigures } from '../store/poolPoints.selectors';

export const PoolPointsKeyFigures = () => {
  const keyFiguresData = useSelector(selectPoolPointsKeyFigures);
  const boxes: Figures[][] = [
    [ {
      value: keyFiguresData.poolPoints.currentValue,
      totalValue: keyFiguresData.poolPoints.totalValue,
      description: 'Pool points',
      type: 'comparison',
    } ],
    [ {
      value: keyFiguresData.potentialAddOn,
      description: 'Potential pool point add on',
      type: 'text',
    } ],
    [ {
      value: keyFiguresData.valueOfPoolPoint,
      description: 'Current value of 1 pool point',
      unit: '/day',
      type: 'money',

    } ] ];

  return (
    <>
      { keyFiguresData &&
      <div>
        <InfoBoxGroup boxes={boxes} extraClass='o-layout__item-xl-4'/>
      </div>
      }
    </>
  );

};