Data Stat Card

'use client';

import './StatCard.css';

/**
 * StatCard — Compact card for displaying key metrics with an icon.
 * 
 * @param {string} label - The metric name (e.g., "Total Revenue").
 * @param {string} value - The primary statistic value (e.g., "$124,590").
 * @param {string} icon - The emoji or text character representing the stat.
 */
export interface StatCardProps {
  label: string;
  value: string;
  icon: string;
}

export function StatCard({ label, value, icon }: StatCardProps) {
  return (
    <>
      <div className="stat-card" data-rk-913005="">
        <div className="stat-card__icon" aria-hidden="true" data-rk-913005="">{icon}</div>
        <div className="stat-card__info" data-rk-913005="">
          <span className="stat-card__label" data-rk-913005="">{label}</span>
          <span className="stat-card__value" data-rk-913005="">{value}</span>
        </div>
      </div>
    </>
  );
}

export default StatCard;

/* StatCard — ported from astro-component-kit (cards/StatCard.astro) */

.stat-card:where([data-rk-913005]) { 
  display: flex; align-items: center; gap: var(--sp-5, 1.25rem); 
  padding: var(--sp-6, 1.5rem); 
  background: var(--c-bg-elev, rgba(99,102,241,0.06)); 
  border: 1px solid var(--c-border, rgba(99,102,241,0.2)); 
  border-radius: var(--r-lg, 16px); 
}
.stat-card__icon:where([data-rk-913005]) { 
  font-size: 1.5rem; 
  background: rgba(99,102,241,0.1); 
  width: 50px; height: 50px; 
  display: grid; place-items: center; 
  border-radius: var(--r-md, 12px); 
}
.stat-card__label:where([data-rk-913005]) { 
  display: block; font-size: 0.8rem; 
  color: var(--c-text-2, #94a3b8); 
  font-weight: 600; text-transform: uppercase; 
}
.stat-card__value:where([data-rk-913005]) { 
  display: block; font-size: 1.4rem; 
  font-weight: 800; color: var(--c-text-1, #fff); 
}