import { Tag } from 'antd';
import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons';

/**
 * @property diffPercent
 * @property diffData
 * @property data1
 * @property data2
 */
export const VSTag = (props) => {
  const { diffPercent, diffData, data1, data2 } = props;
  const CaretIcon = parseInt(diffPercent) < 0 ? CaretDownOutlined : CaretUpOutlined;
  const tagColor = parseInt(diffPercent) < 0 ? 'gold' : 'lime';
  return parseInt(diffPercent) === 0 ? (
    '-'
  ) : (
    <span>
      {/* <div>
        {data1} vs {data2}
      </div> */}
      <Tag icon={<CaretIcon />} color={tagColor}>
        {diffPercent}<span>%</span>{'  '}<span>{diffData}</span>
      </Tag>
    </span>
  );
};