community-rule/app/components/cards/Stat/Stat.view.tsx

"use client";

import { memo } from "react";
import Shapes from "../../asset/Shapes";
import type { StatViewProps } from "./Stat.types";

/**
 * Figma: "Card / Stat" (21598-18215). Full width of grid column at desktop.
 */
function StatView({
  value,
  label,
  asOf,
  asOfPrefix,
  sourceHref,
  sourceName,
  shapeVariant,
  className = "",
}: StatViewProps) {
  const sourcedYear = Boolean(asOfPrefix || sourceHref);

  return (
    <article
      className={`relative flex h-auto min-h-[182px] w-full flex-col items-start justify-between rounded-[var(--radius-500)] bg-[var(--color-surface-invert-primary)] px-[var(--space-600)] py-[var(--space-800)] sm:h-[170px] sm:min-h-0 sm:p-[var(--space-600)] ${className}`.trim()}
    >
      <div className="relative flex w-full flex-col items-start">
        <div className="relative flex items-center">
          <Shapes
            variant={shapeVariant}
            className="absolute -left-[11px] -top-[21px] size-[80px] rotate-[15deg] opacity-90"
          />
          <p className="relative font-bricolage-grotesque text-xx-large-heading text-[var(--color-content-invert-primary)]">
            {value}
          </p>
        </div>
        <p className="text-small-paragraph text-[var(--color-content-invert-primary)]">
          {label}
        </p>
      </div>
      {asOf ? (
        <p className="w-full text-xx-small-paragraph text-[var(--color-content-invert-tertiary)]">
          {sourcedYear ? (
            <>
              {asOfPrefix ? <span>{`${asOfPrefix} `}</span> : null}
              {sourceHref ? (
                <a href={sourceHref} className="underline">
                  {asOf}
                  {sourceName ? (
                    <span className="sr-only">{` (${sourceName})`}</span>
                  ) : null}
                </a>
              ) : (
                <span className="underline">{asOf}</span>
              )}
            </>
          ) : (
            asOf
          )}
        </p>
      ) : null}
    </article>
  );
}

StatView.displayName = "StatView";

export default memo(StatView);