Stat Metric Card

import type React from "react";
import styles from "./stat-metric-card.module.css";

/** Default icon: a pen/design tool SVG (from the original uiverse source). */
const DefaultIcon = () => (
  <svg
    viewBox="0 0 24 24"
    aria-hidden="true"
    xmlns="http://www.w3.org/2000/svg"
    className={styles.iconSvg}
  >
    <path d="m24,6.928v13.072h-11.5v3h5v1H6.5v-1h5v-3H0V4.5c0-1.379,1.122-2.5,2.5-2.5h12.98c-.253.295-.54.631-.856,1H2.5c-.827,0-1.5.673-1.5,1.5v14.5h22v-10.993l1-1.079Zm-12.749,3.094C19.058.891,19.093.855,19.11.838c1.118-1.115,2.936-1.113,4.052.002,1.114,1.117,1.114,2.936,0,4.052l-8.185,8.828c-.116,1.826-1.623,3.281-3.478,3.281h-5.59l.097-.582c.043-.257,1.086-6.16,5.244-6.396Zm2.749,3.478c0-1.379-1.122-2.5-2.5-2.5-2.834,0-4.018,3.569-4.378,5h4.378c1.378,0,2.5-1.121,2.5-2.5Zm.814-1.073l2.066-2.229c-.332-1.186-1.371-2.057-2.606-2.172-.641.749-1.261,1.475-1.817,2.125,1.117.321,1.998,1.176,2.357,2.277Zm.208-5.276c1.162.313,2.125,1.134,2.617,2.229l4.803-5.18c.737-.741.737-1.925.012-2.653-.724-.725-1.908-.727-2.637,0-.069.08-2.435,2.846-4.795,5.606Z" />
  </svg>
);

export interface StatMetricCardProps {
  /** Bold metric number in the offset accent circle (default "02"). */
  stat?: string;
  /** Icon element rendered below the accent circle. Defaults to a pen/design SVG. */
  icon?: React.ReactNode;
  /** Main label / heading for the metric (default "UI / UX Creative Design"). */
  label?: string;
  /** Short supporting caption (default lorem excerpt). */
  caption?: string;
  /** Additional class names merged onto the root element. */
  className?: string;
}

/**
 * A minimal stat/metric card with an offset primary-colored accent circle
 * holding a bold number, a themed icon, a metric label, and a caption.
 * Pure CSS — hover lift only; no JS state. RSC-safe.
 *
 * Port of: https://uiverse.io/jubayer-10/white-catfish-8 (MIT, jubayer-10)
 */
export function StatMetricCard({
  stat = "02",
  icon,
  label = "UI / UX Creative Design",
  caption = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse fuga adipisicing elit.",
  className = "",
}: StatMetricCardProps) {
  return (
    <div className={[styles.card, className].filter(Boolean).join(" ")}>
      {/* Offset accent circle — decorative, aria-hidden */}
      <div className={styles.accentCircle} aria-hidden="true">
        <span className={styles.stat}>{stat}</span>
      </div>

      {/* Icon — no aria-hidden here so a consumer-supplied meaningful icon keeps
          its label; the DefaultIcon carries its own aria-hidden. */}
      <div className={styles.iconWrapper}>
        {icon ?? <DefaultIcon />}
      </div>

      <h3 className={styles.label}>{label}</h3>
      <p className={styles.caption}>{caption}</p>
    </div>
  );
}