import React from 'react';
import moneyPipe from 'app/shared/pipes/money.pipe';
import * as Text from 'app/shared/components/text/text';
import cx from 'classnames';

interface Props {
  label: string;
  value: number;
}

const TceMoneyTrend = ({ label, value }: Props) => {
  const roundedValue = Math.round(value);

  let valueColorClass = '';
  let boxThemeClass = '';
  let iconClass = 'icon-flat-arrow-right';
  if (roundedValue !== 0) {
    const isPositive = roundedValue > 0;
    valueColorClass = isPositive ? 'u-color--money-positive' : 'u-color--money-negative';
    boxThemeClass = isPositive ? 'c-tce-money-trend__box--positive' : 'c-tce-money-trend__box--negative';
    iconClass = isPositive ? 'icon-flat-arrow-up' : 'icon-flat-arrow-down';
  }

  return (
    <div className="o-layout o-layout--vertical">
      <div className="o-layout u-align-items-center">
        <div className={cx('c-tce-money-trend__box u-margin-right--small', boxThemeClass)}>
          <i className={cx('c-tce-money-trend__icon', iconClass)} />
        </div>
        <h5 className={cx('c-tce-money-trend__value', valueColorClass)}>{moneyPipe.format(Math.abs(roundedValue), 'USD', 0)}</h5>  
      </div>
      <Text.Paragraph size="small" extraClass="c-tce-money-trend__label">{label}</Text.Paragraph>
    </div>
  );
};

export { TceMoneyTrend };