import MasterPlan from '@/components/top-level/MasterPlan';
import VideoContent from '@/components/top-level/VideoContent';
import Banner from '@/components/top-level/Banner';
import AddressMap from '@/components/top-level/AddressMap';

import AmenitiesCarousel from '@/components/top-level/AmenitiesCarousel';
import Gallery from '@/components/top-level/Gallery';
import ImageCarousel from '@/components/top-level/ImageCarousel';
import { AsyncContactForm } from '@/components/form/ContactForm';

const PageRenderer = ({ components, prefix }: IPageRenderer) => {
  return components.map(({ component, ...props }, index) => {
    const key = `${prefix}-${index}`;

    switch (component) {
      case 'master-plan':
        return <MasterPlan key={key} {...(props as IMasterPlan)} />;
      case 'video-content':
        return <VideoContent key={key} {...(props as IVideoContent)} />;
      case 'banner':
        return <Banner key={key} {...(props as IBanner)} />;
      case 'address-map':
        return <AddressMap key={key} {...(props as IAddressMap)} />;
      case 'contact':
        return <AsyncContactForm key={key} {...(props as IContactForm)} />;
      case 'amenities-carousel':
        return (
          <AmenitiesCarousel key={key} {...(props as IAmenitiesCarousel)} />
        );
      case 'gallery':
        return <Gallery key={key} {...(props as IGallery)} />;
      case 'image-carousel':
        return <ImageCarousel key={key} {...(props as IImageCarousel)} />;
      default:
        return null;
    }
  });
};

export default PageRenderer;
