import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import "./styles.css";
/**
 * TableFooter component - used to render the footer section of a table with content container
 *
 * @param props - TableFooter component properties
 *
 * **...All valid HTML properties for tfoot element**
 *
 * @returns TableFooter JSX element
 *
 * @example
 * ```tsx
 * // Basic table footer with pagination
 * <TableFooter>
 *   <div>Showing 1-10 of 100 results</div>
 *   <Pagination />
 * </TableFooter>
 *
 * // Table footer with custom styling
 * <TableFooter className="custom-footer">
 *   <Button>Load More</Button>
 * </TableFooter>
 *
 * // Complete table usage
 * <TableContainer>
 *   <TableHeader>
 *     <th>Name</th>
 *     <th>Email</th>
 *   </TableHeader>
 *   <TableBody>
 *     // table rows...
 *   </TableBody>
 *   <TableFooter>
 *     <div className="pagination-info">
 *       Total: 250 items
 *     </div>
 *   </TableFooter>
 * </TableContainer>
 * ```
 */
function TableFooter(props) {
    const { className: baseClassName, children, ...rest } = props;
    const className = `arkynTableFooter ${baseClassName}`;
    return (_jsxs("tfoot", { className: className.trim(), ...rest, children: [_jsx("tr", { className: "spacingRow" }), _jsx("tr", { children: _jsx("th", { colSpan: 100, children: _jsx("div", { className: "arkynTableFooterContent", children: children }) }) })] }));
}
export { TableFooter };
