import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Icon } from "@powerhousedao/design-system";
import { useCallback } from "react";
import { Fragment } from "react/jsx-runtime";
import { tableNames } from "../constants/names.js";
import { useEditorContext } from "../context/editor-context.js";
import { RWATableCell } from "./table-cell.js";
import { RWATableRow } from "./table-row.js";
import { TableWithForm } from "./table-with-form.js";
export function AccountsTable() {
    const { accounts, principalLenderAccountId } = useEditorContext();
    const principalLenderAccount = accounts.find((account) => account.id === principalLenderAccountId);
    const renderPrincipalLenderRow = useCallback((c) => (_jsx(RWATableRow, { children: c.map((column) => (_jsx(Fragment, { children: column.key === "label" ? (_jsxs(RWATableCell, { children: [principalLenderAccount?.label, _jsxs("span", { className: "ml-2 inline-flex items-center gap-1 rounded bg-green-100 px-1 font-extralight", children: ["Lender ", _jsx(Icon, { name: "CheckCircle", size: 14 })] })] })) : (_jsx(RWATableCell, {})) }, column.key))) })), [principalLenderAccount?.label]);
    const specialFirstRow = principalLenderAccount?.label
        ? renderPrincipalLenderRow
        : undefined;
    return (_jsx(TableWithForm, { specialFirstRow: specialFirstRow, tableName: tableNames.ACCOUNT }));
}
//# sourceMappingURL=accounts-table.js.map