import React, { Component } from 'react';

import { HERO_MULTI } from 'utils/constants/layouts-names';

import CosmosDefault from './layouts/cosmos/cosmos-hero-multi-default';

import { HeroMultiModuleProps } from './hero-multi-module.types';
import { HeroMultiLayoutOption } from 'types/generator-page';

const heroMultiLayouts: { [key in HeroMultiLayoutOption]: React.ReactNode } = {
  [HERO_MULTI.COSMOS_DEFAULT]: CosmosDefault
};

export class HeroMultiModule extends Component<HeroMultiModuleProps> {
  render() {
    const { data: { layoutOption } } = this.props;
    const Component: any = heroMultiLayouts[layoutOption];
    return (
      <Component {...this.props} />
    )
  }
}

export default HeroMultiModule;