import { Stack, Text } from '@mantine/core';
import { useEffect, useState } from 'react';
import { DataTable } from '../../../DataTable/DataTable';
import MessagesColumns from '../../../DataTable/columns/MessagesColumns';
import { useQueryAPI } from '../../../hooks/useAPI';
import { textClasses } from '../../../styles';
const MessageSettings = () => {
	const endpoint = 'api/messages';
	const { data, isFetching, isLoading, isFetched } = useQueryAPI({
		endpoint: endpoint,
	});
	const [messageData, setMessageData] = useState<any>([]);

	useEffect(() => {
		if (isFetched) {
			setMessageData(data);
		}
	});

	return (
		<Stack>
			<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
				Messages
			</Text>
			<DataTable
				tableName='Messages'
				columns={MessagesColumns()}
				tableData={messageData}
				isFetching={isFetching}
				isLoading={isLoading}
				endpoint={endpoint}
			/>
		</Stack>
	);
};
export default MessageSettings;