SubscriptionCard

import * as React from "react";
import { cn } from "@/lib/ledger/cn";
import { formatDate } from "@/lib/ledger/fiscal-period";
import type { MoneyValue } from "@/lib/ledger/money.types";
import { Card } from "@/components/ledger/card";
import { EntityMark } from "@/components/ledger/entity-mark";
import { Money } from "@/components/ledger/money";

export interface SubscriptionCardProps extends React.ComponentPropsWithoutRef<"div"> {
  amount: MoneyValue;
  /** Computed by the caller — components never do arithmetic. */
  annualized: MoneyValue;
  cadence: "monthly" | "quarterly" | "annual";
  nextCharge: Date;
  vendor: string;
  vendorSrc?: string;
}

/**
 * The annualized figure is the useful number. $49/mo is $588/yr, and showing
 * it is what makes a spend review actionable.
 */
export const SubscriptionCard = React.forwardRef<HTMLDivElement, SubscriptionCardProps>(
  ({ className, vendor, vendorSrc, amount, cadence, nextCharge, annualized, ...props }, ref) => (
    <Card className={cn("flex items-center gap-3", className)} inset="compact" ref={ref} {...props}>
      <EntityMark category="merchant" name={vendor} size={40} src={vendorSrc} />
      <div className="min-w-0 flex-1">
        <p className="truncate text-body font-medium">{vendor}</p>
        <p className="text-caption text-text-secondary">Next {formatDate(nextCharge)}</p>
      </div>
      <div className="text-right">
        <Money size="md" value={amount} />
        <p className="text-caption text-text-secondary">
          <span className="numeric">
            <Money size="xs" tone="inherit" value={annualized} />
          </span>{" "}
          / year
        </p>
        <p className="sr-only">{cadence}</p>
      </div>
    </Card>
  ),
);
SubscriptionCard.displayName = "SubscriptionCard";