PaymentSuccess

"use client";

import * as React from "react";
import { useReducedMotion } from "@/hooks/ledger/use-media-query";
import { cn } from "@/lib/ledger/cn";
import { formatDate } from "@/lib/ledger/fiscal-period";
import type { MoneyValue } from "@/lib/ledger/money.types";
import { Figure } from "@/components/ledger/figure";
import { MaskedAccount } from "@/components/ledger/reference";

export interface PaymentSuccessProps extends React.ComponentPropsWithoutRef<"div"> {
  amount: MoneyValue;
  arrivalDate: Date;
  payeeLast4: string;
  payeeName: string;
}

/**
 * The sanctioned delight moment: circle scale → checkmark stroke draw →
 * details fade up, staggered. Total ≤ 700ms. No confetti, no bounce, no sound.
 *
 * Shows the three things a user needs before they close the screen: the
 * amount, the destination, and the arrival estimate.
 */
export const PaymentSuccess = React.forwardRef<HTMLDivElement, PaymentSuccessProps>(
  ({ className, amount, payeeName, payeeLast4, arrivalDate, ...props }, ref) => {
    const reduced = useReducedMotion();
    return (
      <div
        className={cn("flex flex-col items-center gap-4 py-8 text-center", className)}
        ref={ref}
        role="status"
        {...props}
      >
        <svg aria-hidden="true" className="shrink-0" height="64" viewBox="0 0 64 64" width="64">
          <circle
            cx="32"
            cy="32"
            fill="var(--positive-subtle)"
            r="30"
            stroke="var(--positive)"
            strokeWidth="1.5"
            style={reduced ? undefined : { animation: "ledger-enter 240ms var(--ease-out) both" }}
          />
          <path
            d="M20 33 L28.5 41.5 L44 25"
            fill="none"
            stroke="var(--positive)"
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="3"
            style={
              reduced
                ? undefined
                : {
                    animation: "ledger-draw 280ms var(--ease-out) 200ms forwards",
                    strokeDasharray: 40,
                    strokeDashoffset: 40,
                  }
            }
          />
        </svg>

        <div style={reduced ? undefined : { animation: "ledger-enter 240ms var(--ease-out) 400ms both" }}>
          <p className="text-title-sm font-medium">Payment sent</p>
          <Figure className="mt-2 justify-center" size="lg" value={amount} />
        </div>

        <p
          className="flex flex-wrap items-center justify-center gap-1 text-body text-text-secondary"
          style={reduced ? undefined : { animation: "ledger-enter 240ms var(--ease-out) 480ms both" }}
        >
          To {payeeName} <MaskedAccount last4={payeeLast4} />
          <span aria-hidden="true">·</span> Arrives {formatDate(arrivalDate)}
        </p>
      </div>
    );
  },
);
PaymentSuccess.displayName = "PaymentSuccess";