import { Text } from '@mantine/core';
import { useEffect, useState } from 'react';
import { DataTable } from '../../../DataTable/DataTable';
import PersonalizationColumns from '../../../DataTable/columns/PersonalizationColumns';
import { useQueryAPI } from '../../../hooks/useAPI';
import { textClasses } from '../../../styles';
const PersonalizationSettings = () => {
	const endpoint = 'api/personalData';
	const { data, isFetching, isLoading, isFetched } = useQueryAPI({
		endpoint: endpoint,
	});
	const [personalData, setPersonalData] = useState<any>([]);

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

	return (
		<>
			<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
				Personalization
			</Text>
			<DataTable
				tableName='Personalization'
				columns={PersonalizationColumns()}
				tableData={personalData}
				isFetching={isFetching}
				isLoading={isLoading}
				endpoint={endpoint}
			/>
		</>
	);
};
export default PersonalizationSettings;