import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useState } from "react";
const ExpandableTable = ({ data }) => {
    // State to track expanded rows (using row IDs)
    const [expandedRows, setExpandedRows] = useState([]);
    const toggleRowExpansion = (rowId) => {
        setExpandedRows((prev) => prev.includes(rowId)
            ? prev.filter((id) => id !== rowId)
            : [...prev, rowId]);
    };
    return (_jsxs("table", { style: { width: '100%', borderCollapse: 'collapse' }, children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { style: { border: '1px solid black', padding: '8px' }, children: "Name" }), _jsx("th", { style: { border: '1px solid black', padding: '8px' }, children: "Age" }), _jsx("th", { style: { border: '1px solid black', padding: '8px' }, children: "Actions" })] }) }), _jsx("tbody", { children: data.map((row) => (_jsxs(React.Fragment, { children: [_jsxs("tr", { children: [_jsx("td", { style: { border: '1px solid black', padding: '8px' }, children: row.name }), _jsx("td", { style: { border: '1px solid black', padding: '8px' }, children: row.age }), _jsx("td", { style: { border: '1px solid black', padding: '8px' }, children: _jsx("button", { onClick: () => toggleRowExpansion(row.id), children: expandedRows.includes(row.id) ? 'Collapse' : 'Expand' }) })] }), expandedRows.includes(row.id) && (_jsx("tr", { children: _jsxs("td", { colSpan: 3, style: {
                                    border: '1px solid black',
                                    padding: '8px',
                                    backgroundColor: '#f9f9f9',
                                    height: '200px',
                                }, children: [_jsx("strong", { children: "Details:" }), " ", row.details] }) }))] }, row.id))) })] }));
};
export default ExpandableTable;
//# sourceMappingURL=ExpandableTable.js.map