import React from 'react';

import { TextModuleProps } from './text-module.types';
import { RichTextModuleLayout } from '../../../../types/generator-page';
import { RICH_TEXT } from 'utils/constants/layouts-names';
import AsterDefault from './layouts/aster-default/aster-default';
import BegoniaCenter from './layouts/begonia-default/begonia-default';

const RichTextLayouts: { [key in RichTextModuleLayout]: React.ReactNode } = {
  [RICH_TEXT.ASTER_DEFAULT]: AsterDefault,
  [RICH_TEXT.BEGONIA_CENTER]: BegoniaCenter
};

const TextModule = (props: TextModuleProps): JSX.Element => {
  const RichTextLayoutComponent: any = RichTextLayouts[props.data.layoutOption];
  // wtf why cant I use spread on the props
  if (RichTextLayoutComponent) {
    return <RichTextLayoutComponent data={props.data}/>;
  } else {
    return <AsterDefault data={props.data} />;
  }

};

export default TextModule;