import React from 'react';

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

import { ShowOnTabletDown, ShowOnLarge } from 'utils/styles/display';

import CosmosHeroMultiDesktop from './desktop/cosmos-hero-multi-desktop';
import CosmosHeroMultiTabletPhone from './tablet-mobile/cosmos-hero-multi-tablet-phone';

const CosmosHeroMultiDefault = (props: HeroMultiModuleProps): JSX.Element => {
  return (
    <>
      <ShowOnLarge>
        <CosmosHeroMultiDesktop {...props} />
      </ShowOnLarge>
      <ShowOnTabletDown>
        <CosmosHeroMultiTabletPhone {...props} />
      </ShowOnTabletDown>
    </>
  )
}

export default CosmosHeroMultiDefault;