import React from 'react';
import TableItem from './TableItem';

function TablesList({ tables, setCopiedTables, setTableCount, setTables, setLoader }) {
	return (
		<div className="vertical-tables-list">
			{tables && tables.length > 0 ? (
				tables.map((table) => (
					<TableItem
						key={table.id}
						table={table}
						setCopiedTables={setCopiedTables}
						setTableCount={setTableCount}
						setTables={setTables}
						setLoader={setLoader}
					/>
				))
			) : (
				<div className="no-forms-message">
					<p>No forms to display</p>
				</div>
			)}
		</div>
	);
}

export default TablesList;