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

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} {diffData}
      </Tag>
    </span>
  );
};