import React from 'react';
import classnames from 'classnames';
import { InfoCardProps } from 'src/types/op-info-card';

import './index.scss';

export default function OPInfoCard(props: InfoCardProps) {
  const { data, className, columns = 3 } = props;

  return (
    <div
      className={classnames('op-info-card', className, {
        [`op-info-card-col-${columns}`]: columns,
      })}
    >
      {data.map((item, index) => (
        <div key={index} className='op-info-card-item'>
          <div className='op-info-card-label'>{item.label}</div>
          <div className='op-info-card-value'>{item.value}</div>
        </div>
      ))}
    </div>
  );
}