SwapRoute

import * as React from "react";
import { cn } from "@/lib/ledger/cn";
import { formatRate } from "@/lib/ledger/format-money";
import type { MoneyValue } from "@/lib/ledger/money.types";
import { ArrowRightIcon } from "@/components/ledger/icons";
import { Money } from "@/components/ledger/money";

export type Hop = { from: string; to: string; rate: number; fee: MoneyValue };

export interface SwapRouteProps extends React.ComponentPropsWithoutRef<"div"> {
  hops: Hop[];
}

/** A horizontal flow, each hop with its own rate and fee. Motion explains the mechanism. */
export const SwapRoute = React.forwardRef<HTMLDivElement, SwapRouteProps>(
  ({ className, hops, ...props }, ref) => (
    <div
      aria-label="Conversion route"
      className={cn("flex flex-wrap items-stretch gap-2", className)}
      ref={ref}
      role="list"
      {...props}
    >
      {hops.map((hop, i) => (
        <React.Fragment key={`${hop.from}-${hop.to}`}>
          <div className="flex-1 rounded-md border border-border bg-surface p-3" role="listitem">
            <p className="reference-numeric text-label font-medium">
              {hop.from} → {hop.to}
            </p>
            <p className="numeric mt-1 text-caption text-text-secondary">{formatRate(hop.rate)}</p>
            <p className="text-caption text-text-secondary">
              Fee <Money showCode size="xs" tone="inherit" value={hop.fee} />
            </p>
          </div>
          {i < hops.length - 1 ? (
            <ArrowRightIcon aria-hidden="true" className="size-4 self-center text-text-tertiary" />
          ) : null}
        </React.Fragment>
      ))}
    </div>
  ),
);
SwapRoute.displayName = "SwapRoute";