GoalCard

import * as React from "react";
import { cn } from "@/lib/ledger/cn";
import type { MoneyValue } from "@/lib/ledger/money.types";
import { Card } from "@/components/ledger/card";
import { Money } from "@/components/ledger/money";
import { Percent } from "@/components/ledger/percent";

export interface GoalCardProps extends React.ComponentPropsWithoutRef<"div"> {
  actual: MoneyValue;
  label: string;
  /** Computed by the caller. */
  progressPercent: number;
  target: MoneyValue;
}

/**
 * The progress indicator is a rule line, not a rounded bar — consistent with
 * the statement grammar rather than borrowed from a generic UI kit.
 */
export const GoalCard = React.forwardRef<HTMLDivElement, GoalCardProps>(
  ({ className, label, actual, target, progressPercent, ...props }, ref) => {
    const clamped = Math.max(0, Math.min(100, progressPercent));
    return (
      <Card className={cn("flex flex-col gap-3", className)} ref={ref} {...props}>
        <span className="text-label font-medium text-text-secondary">{label}</span>
        <div className="flex items-baseline justify-between gap-3">
          <Money size="lg" value={actual} />
          <span className="text-caption text-text-secondary">
            of <Money size="xs" tone="inherit" value={target} />
          </span>
        </div>
        <div
          aria-label={`${label} progress`}
          aria-valuemax={100}
          aria-valuemin={0}
          aria-valuenow={Math.round(clamped)}
          className="relative h-[3px] w-full bg-border-subtle"
          role="progressbar"
        >
          <div className="absolute inset-y-0 left-0 bg-accent" style={{ width: `${clamped}%` }} />
        </div>
        <Percent signed={false} value={{ kind: "relative", value: progressPercent }} />
      </Card>
    );
  },
);
GoalCard.displayName = "GoalCard";