Card.tsx

import React from 'react'
import Icon from 'cozy-ui/react/Icon'
import { translate } from 'cozy-ui/react/I18n'
import { FluidType } from 'enum/fluid.enum'
import { getPicto, getCardColor } from 'utils/utils'
import { ProcessedData } from 'services/fluidService'
export interface CardProps extends ProcessedData {
  type: FluidType
  t: any // translation service
}

const Card: React.FC<CardProps> = ({
  type,
  consumptionValue,
  weeklyCompareValue,
  euclideanComparator,
  t,
}: CardProps) => {
  const iconType = getPicto(type)
  let sign: string
  if (weeklyCompareValue > 0) {
    sign = '+'
  } else {
    sign = '-'
    weeklyCompareValue = Math.abs(weeklyCompareValue)
  }

  return (
    <React.Fragment>
      {weeklyCompareValue ? (
        <div className={getCardColor(type)}>
          <h1>{t('FLUID.' + FluidType[type] + '.LABEL')}</h1>
          <div className="card-header">
            <Icon icon={iconType} size={64} />
            <div>
              <h2>
                <span>{consumptionValue}</span>{' '}
                {t('FLUID.' + FluidType[type] + '.UNIT')}
              </h2>
              <h3>
                <span className={sign === '+' ? 'green' : 'red'}>
                  {sign + ' ' + weeklyCompareValue + ' %'}
                </span>{' '}
                / 7 derniers jours
              </h3>
            </div>
          </div>
          <p>{euclideanComparator}</p>
        </div>
      ) : (
        <div className={getCardColor(type)}>
          <h1>{t('FLUID.' + FluidType[type] + '.LABEL')}</h1>
          <div className="card-header">
            <Icon icon={iconType} size={64} />
            <div>
              <h2>
                <span>-</span> {t('FLUID.' + FluidType[type] + '.UNIT')}
              </h2>
              <h3>
                <span className={'blue'}> - %</span> / 7 derniers jours
              </h3>
            </div>
          </div>
          <p>Données insuffisantes pour le calcul des indicateurs</p>
        </div>
      )}
    </React.Fragment>
  )
}

export default translate()(Card)