PaymentMethodList

"use client";

import { Radio } from "@base-ui-components/react/radio";
import { RadioGroup } from "@base-ui-components/react/radio-group";
import { cn } from "@/lib/ledger/cn";
import type { MoneyValue } from "@/lib/ledger/money.types";
import { EntityMark } from "@/components/ledger/entity-mark";
import { CheckIcon } from "@/components/ledger/icons";
import { Money } from "@/components/ledger/money";
import { MaskedAccount } from "@/components/ledger/reference";

export type PaymentMethod = {
  id: string;
  name: string;
  last4: string;
  kind: "bank" | "card";
  /** Stated inline; per-method differences are the reason this list exists. */
  fee?: MoneyValue;
  arrival: string;
};

export interface PaymentMethodListProps {
  className?: string;
  methods: PaymentMethod[];
  onValueChange: (id: string) => void;
  value: string;
}

/**
 * Selected state carries a 2px accent border, an accent-subtle background,
 *and* a check glyph — border colour alone fails forced-colors mode.
 */
export function PaymentMethodList({ methods, value, onValueChange, className }: PaymentMethodListProps) {
  return (
    <RadioGroup
      aria-label="Payment method"
      className={cn("flex flex-col gap-2", className)}
      onValueChange={(v) => onValueChange(String(v))}
      value={value}
    >
      {methods.map((m) => {
        const selected = m.id === value;
        return (
          <Radio.Root
            className={cn(
              "flex items-center gap-3 rounded-md border bg-surface p-3 text-left",
              "transition-colors duration-1 ease-standard",
              selected
                ? "border-2 border-accent bg-accent-subtle p-[11px]"
                : "border-border hover:bg-surface-hover",
            )}
            key={m.id}
            value={m.id}
          >
            <EntityMark category={m.kind} name={m.name} size={32} />
            <span className="min-w-0 flex-1">
              <span className="block truncate text-body font-medium">{m.name}</span>
              <span className="flex items-center gap-2 text-caption text-text-secondary">
                <MaskedAccount last4={m.last4} />
                <span aria-hidden="true">·</span>
                {m.arrival}
              </span>
            </span>
            {m.fee ? (
              <span className="text-caption text-text-secondary">
                Fee <Money size="xs" tone="inherit" value={m.fee} />
              </span>
            ) : (
              <span className="text-caption text-text-secondary">No fee</span>
            )}
            <span
              aria-hidden="true"
              className={cn(
                "grid size-5 shrink-0 place-items-center rounded-full border",
                selected ? "border-accent bg-accent text-accent-fg" : "border-border-strong",
              )}
            >
              {selected ? <CheckIcon className="size-3" /> : null}
            </span>
          </Radio.Root>
        );
      })}
    </RadioGroup>
  );
}