import { StockIncreseIcon } from "../../../../../components/icons/RealTimeVisulationIcons";

const ProgressCard = ({
  title,
  data,
}: {
  title: string;
  data: { stocks: Array<{ key: string; value: number; description: string }> };
}) => (
  <div className="chart progressBar">
    <div className="header">{title}</div>
    {data?.stocks?.map((stock, index) => (
      <div key={index} className="stock">
        <span className="stock-item">
          <span className="stockValues">
            <div className="key">{stock.key}</div>
            <div className="value">{stock.value}</div>
          </span>
          <div className="stock-description">{stock.description}</div>
        </span>
        <div className="icon">
          <StockIncreseIcon />
        </div>
      </div>
    ))}
  </div>
);

export default ProgressCard;