import { GlassSurface } from "@nodedc/ui-react";

export interface MetricCardProps {
  eyebrow: string;
  value: string;
  unit?: string;
  detail: string;
  featured?: boolean;
}

export function MetricCard({ eyebrow, value, unit, detail, featured = false }: MetricCardProps) {
  return (
    <GlassSurface className="metric-card" padding="md" data-featured={featured ? "true" : undefined}>
      <span className="metric-card__eyebrow">{eyebrow}</span>
      <div className="metric-card__reading">
        <strong>{value}</strong>
        {unit ? <span>{unit}</span> : null}
      </div>
      <p>{detail}</p>
    </GlassSurface>
  );
}