import React from 'react';
import { SRow } from '../s-components/layout/s-row';
import { Icon } from './icon';
import { theme } from '../../app/theme';
import { SZeroTrendValue } from '../s-components/s-zero-trend-value';

type TProps = {
  showPercent?: boolean;
  zeroColor?: string;
};

export const ZeroTrend: React.FC<TProps> = props => {
  const { showPercent, zeroColor } = props;
  const iconName = 'arrow-right';

  return (
    <SRow ml={4}>
      <Icon mr={2} mt={2} name={iconName} size={12} color={zeroColor} />
      <SZeroTrendValue color={zeroColor}>{`${
        showPercent ? '0%' : 0
      }`}</SZeroTrendValue>
    </SRow>
  );
};

ZeroTrend.defaultProps = {
  showPercent: false,
  zeroColor: theme.colors.sunshade,
};