import type { ComponentType } from "react";
import type { TemplateProps } from "../contract";
import { LedgerLayout } from "./Layout";
import type { LedgerVariant } from "./variant";

/** The family component bound to one variant's tokens, as the TemplateDefinition's Layout. */
export function LedgerLayoutFor(variant: LedgerVariant): ComponentType<TemplateProps> {
  const Layout = (props: TemplateProps) => <LedgerLayout {...props} variant={variant} />;
  Layout.displayName = `LedgerLayout(${variant.id})`;
  return Layout;
}