import { Box } from 'UIKit/grid';
import elementsRender from '../config/elements-render';
import type { SectionsConfig } from '../types/sections';

function renderElements(config: SectionsConfig) {
  const rows = config.map(([elements, style], i) => {
    const renderedElements = elements.map((elementName) => {
      const render = elementsRender[elementName]?.render;

      return render();
    });

    return (
      <Box
        // eslint-disable-next-line react/no-array-index-key
        key={i.toString()}
        sx={{
          display: 'grid',
          gridTemplateColumns: ['1fr', '1fr', 'repeat(3, 1fr)'],
          gap: '10px',
          ...style,
        }}
      >
        {renderedElements}
      </Box>
    );
  });

  return (
    <Box
      sx={{
        display: 'grid',
        gridAutoRows: 'auto',
      }}
    >
      {rows}
    </Box>
  );
}

export default renderElements;