import type { ReactNode } from "react";

interface MetricCardProps {
  icon: string;
  label: string;
  value: ReactNode;
  helper?: string;
}

export default function MetricCard({ icon, label, value, helper }: MetricCardProps) {
  return (
    <article className="metric-card">
      <span aria-hidden="true" className="metric-icon">
        {icon}
      </span>
      <div>
        <p className="metric-value">{value}</p>
        <p className="metric-label">{label}</p>
        {helper ? <p className="metric-helper">{helper}</p> : null}
      </div>
    </article>
  );
}