TransactionCard

"use client";

import { Checkbox } from "@base-ui-components/react/checkbox";
import { cn } from "@/lib/ledger/cn";
import { formatDateShort } from "@/lib/ledger/fiscal-period";
import { EntityMark } from "@/components/ledger/entity-mark";
import { CheckIcon, EllipsisHorizontalIcon } from "@/components/ledger/icons";
import { Money } from "@/components/ledger/money";
import { StatusPill } from "@/components/ledger/status-pill";
import type { Transaction } from "@/components/ledger/transaction-table";

export interface TransactionCardProps {
  onOpen?: () => void;
  onToggle?: () => void;
  selected?: boolean;
  transaction: Transaction;
}

/**
 * The mobile re-rank, not a squeezed table row: 72px, 16px inset, full-bleed
 * divider, 32px mark, amount right-aligned and never truncated.
 *
 * Swipe is undiscoverable, so the overflow menu is the equivalent and it is
 * always present.
 */
export function TransactionCard({
  transaction: t,
  selected = false,
  onToggle,
  onOpen,
}: TransactionCardProps) {
  return (
    <li
      className={cn(
        "flex min-h-[72px] items-center gap-3 border-b border-border-subtle px-4 last:border-b-0",
        selected && "bg-surface-selected",
        // Pending is the warning rule and the "Pending" label, never a dimmed
        // row: at 70% its secondary text fell to 3.2:1.
        t.pending && "border-l-2 border-l-[var(--warning)]",
      )}
    >
      {onToggle ? (
        <Checkbox.Root
          aria-label={`Select ${t.description}`}
          checked={selected}
          className="grid size-5 shrink-0 place-items-center rounded-xs border border-border-strong bg-surface data-[checked]:border-accent data-[checked]:bg-accent"
          onCheckedChange={onToggle}
        >
          <Checkbox.Indicator className="text-accent-fg">
            <CheckIcon className="size-3.5" />
          </Checkbox.Indicator>
        </Checkbox.Root>
      ) : null}

      <EntityMark name={t.merchant ?? t.description} size={32} />

      <button className="min-w-0 flex-1 py-3 text-left" onClick={onOpen} type="button">
        <span className="block truncate text-body font-medium">{t.description}</span>
        <span className="mt-0.5 block truncate text-caption text-text-secondary">
          <span className="numeric">{formatDateShort(t.date)}</span> · {t.account}{" "}
          <span className="reference-numeric">••{t.accountLast4}</span>
        </span>
        {t.status !== "settled" ? (
          <span className="mt-1 inline-block">
            <StatusPill entity="Transaction" status={t.status} />
          </span>
        ) : null}
      </button>

      <div className="flex shrink-0 flex-col items-end gap-1">
        <Money accounting colorBySign value={t.amount} />
        <button
          aria-label={`Actions for ${t.description}`}
          className="press grid size-8 place-items-center rounded-sm text-text-tertiary hover:bg-surface-hover"
          type="button"
        >
          <EllipsisHorizontalIcon aria-hidden="true" className="size-4" />
        </button>
      </div>
    </li>
  );
}