import React, { useEffect } from 'react';
import { useDispatch } from 'react-redux';

import { getConfigurationDataAction } from '../redux/slices';

import Models from '@/modules/configuration/components/model/Models';
import Dictionary from './dictionary/dictionary';
import { Stack, Typography } from '@/mui/components';

import styles from './index.module.scss';

function ConfigurationPage() {
  const dispatch = useDispatch();
  const sections = [
    {
      title: 'Dictionary',
      component: Dictionary,
    },
    {
      title: 'Content analysis models',
      component: Models,
    },
  ];

  useEffect(() => {
    dispatch(getConfigurationDataAction());
  }, []);

  return (
    <Stack spacing={4} className={styles.Wrapper}>
      {sections.map((item$) => {
        const Component = item$.component;

        return (
          <Stack spacing={2} key={`item-${item$.title}`}>
            <Typography variant="h6Alt">{item$.title}</Typography>
            <div>
              <Component />
            </div>
          </Stack>
        );
      })}
    </Stack>
  );
}

export default ConfigurationPage;
