export function MetricCard({
  label,
  value,
  unit,
  color,
  sub,
}: {
  label: string;
  value: string;
  unit: string;
  color: string;
  sub: string;
}) {
  return (
    <div className="bg-bg-card border border-stroke rounded-md p-2">
      <div className="text-caption text-fg-disabled font-korean">{label}</div>
      <div className="text-title-3 font-bold font-mono" style={{ color }}>
        {value}
        <span className="text-caption"> {unit}</span>
      </div>
      <div className="text-caption font-korean text-fg-disabled">{sub}</div>
    </div>
  );
}
