import * as classNames from "classnames";
import * as React from "react";

import { Link, ILinkProps } from "../Link";
import { Icon, IIconProps } from "../Icon";

export interface IStat {
  /**
   * Since we iterate through the provided sections,
   * we want to provide proper keys to React.
   */
  id: string;
  text?: string;
  icon?: IIconProps;
  link?: ILinkProps;
}

export interface IStatsProps {
  stats: IStat[];
}

export const Stats = ({ stats }: IStatsProps) => (
  <div className="stats">
    {stats.map(({ id, text, icon, link }) => (
      <div className={classNames("stats__stat", {
        "stats__stat--with-link": link,
      })} key={id}>
        {icon && (
          <div className="stats__stat-icon">
            <Icon {...icon} />
          </div>
        )}

        {(text || link) && (
          <div className="stats__stat-value">
            {link ? <Link {...link} /> : text}
          </div>
        )}
      </div>
    ))}
  </div>
)