Progress card

import * as React from "react";
import { CheckIcon } from "lucide-react";
import { Card, CardContent } from "@/components/ui/card";
import { cn } from "@/lib/utils";

type ProgressCardProps = Omit<React.ComponentProps<typeof Card>, "children"> & {
  /** What is being measured, for example "Waitlist signups". */
  label: string;
  /** The current value. */
  value: number;
  /** The goal. */
  max?: number;
  /** Formats the count on the right. Defaults to "1,284 / 2,000". */
  format?: (value: number, max: number) => string;
  /** One quiet line under the bar. */
  footnote?: string;
};

const number = new Intl.NumberFormat("en-US");
const defaultFormat = (value: number, max: number) => `${number.format(value)} / ${number.format(max)}`;

/**
 * A goal with a monochrome progress bar and the count on the right in mono.
 * A check mark joins the count once the goal is met.
 */
export function ProgressCard({
  label,
  value,
  max = 100,
  format = defaultFormat,
  footnote,
  className,
  ...props
}: ProgressCardProps) {
  const clamped = Math.min(Math.max(value, 0), max);
  const percent = max > 0 ? (clamped / max) * 100 : 0;
  const complete = max > 0 && clamped >= max;
  const count = format(value, max);

  return (
    <Card size="sm" data-complete={complete || undefined} className={cn("gap-2", className)} {...props}>
      <CardContent className="flex flex-col gap-2">
        <div className="flex items-baseline justify-between gap-3">
          <p className="m-0 truncate text-sm text-foreground">{label}</p>
          <p className="m-0 inline-flex shrink-0 items-center gap-1 font-mono text-xs text-muted-foreground tabular-nums">
            {complete && (
              <>
                <CheckIcon className="size-3.5 self-center text-foreground" aria-hidden="true" />
                <span className="sr-only">Complete: </span>
              </>
            )}
            {count}
          </p>
        </div>
        <div
          role="progressbar"
          aria-label={label}
          aria-valuemin={0}
          aria-valuemax={max}
          aria-valuenow={clamped}
          aria-valuetext={count}
          className="h-1 w-full overflow-hidden rounded-full bg-muted"
        >
          <div
            data-slot="progress-card-fill"
            className="h-full rounded-full bg-foreground transition-[width] duration-200 ease-out motion-reduce:transition-none"
            style={{ width: `${percent}%` }}
          />
        </div>
        {footnote && <p className="m-0 text-xs text-muted-foreground">{footnote}</p>}
      </CardContent>
    </Card>
  );
}