// ./registry/lagos/ui/summary-card.tsx import React, { ReactNode } from "react"; import { formatCurrency, formatNumber, } from "@/registry/utils/number-formatter"; export interface SummaryItem { label: string; value: ReactNode; price?: { amount: Maybe; currency: Maybe; }; content?: ReactNode; } type Maybe = T | null | undefined; const SummaryCard: React.FC<{ items: SummaryItem[]; summary?: Maybe; layout?: "vertical" | "horizontal"; }> = ({ items, summary, layout = "vertical" }) => { const isHorizontal = layout === "horizontal"; return (

{/* Items Container */}

{items.map((item, index) => (

{item.label} {typeof item.value === "string" && item.value.length > 0 ? ( {item.value} ) : ( item.value )}

{item?.content ? ( <>{item?.content} ) : item?.price ? (

{item?.price?.currency ? formatCurrency(item?.price?.amount || 0, { currency: item.price.currency, locale: "en-US", }) : formatNumber(item?.price?.amount || 0)}

) : null}

))}

{/* Summary Section - Always at bottom */} {summary && (

{summary.label} {summary.value || "Not provided"}

{summary?.content ? ( <>{summary?.content} ) : summary.price ? (

{summary?.price?.currency ? formatCurrency(summary?.price?.amount || 0, { currency: summary.price.currency, locale: "en-US", }) : formatNumber(summary?.price?.amount || 0)}

) : null}

)}

); }; export default SummaryCard;