PayoutSchedule

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 { Money } from "@/components/ledger/money";
import { StatusPill } from "@/components/ledger/status-pill";

export type Payout = {
  id: string;
  date: Date;
  amount: MoneyValue;
  destination: string;
  /** Stated in the user's timezone; a cutoff without a zone is a guess. */
  cutoff: string;
  holiday?: string;
};

export interface PayoutScheduleProps extends React.ComponentPropsWithoutRef<"div"> {
  payouts: Payout[];
}

/** Business days respected, holidays flagged, cutoffs stated with the zone. */
export const PayoutSchedule = React.forwardRef<HTMLDivElement, PayoutScheduleProps>(
  ({ className, payouts, ...props }, ref) => (
    <div className={cn("rounded-xl border border-border bg-surface", className)} ref={ref} {...props}>
      <ul>
        {payouts.map((p) => (
          <li
            className="flex items-center gap-4 border-b border-border-subtle px-4 py-3 last:border-b-0"
            key={p.id}
          >
            <div className="w-24 shrink-0">
              <p className="numeric text-label font-medium">{formatDate(p.date)}</p>
              <p className="text-caption text-text-tertiary">Cutoff {p.cutoff}</p>
            </div>
            <div className="min-w-0 flex-1">
              <p className="truncate text-body">{p.destination}</p>
              {p.holiday ? (
                <p className="text-caption text-warning">
                  Bank holiday: {p.holiday} — settles the next business day
                </p>
              ) : null}
            </div>
            {p.holiday ? <StatusPill entity="Payout" status="scheduled" /> : null}
            <Money accounting size="sm" value={p.amount} />
          </li>
        ))}
      </ul>
    </div>
  ),
);
PayoutSchedule.displayName = "PayoutSchedule";