commerce/site/components/common/Room/MarkerCardModal/MarkerCardModal.tsx

import { 
    Modal, 
    ModalOverlay, 
    ModalContent,  
    ModalBody, 
} from "@chakra-ui/react"
import { Product } from "@commerce/types"
import ProductCardRoom from "../../../product/ProductCardRoom/ProductCardRoom"

import decadesManifest from '../../../../static_data/decadesManifest.json';
import ResourceCardModal from "@components/common/Room/ResourceCardModal/ResourceCardModal";
import { MarkerData, MarkerResourcePayload } from "../RoomTypes/RoomTypes";

export default function MarkerCardModal(props: {
    isOpen: boolean,
    onModalClose: () => void,
    marker: MarkerData,
    decade: string,
    onAudioPlayerPlay?: (player: HTMLAudioElement) => void,
    onAudioPlayerPause?: () => void
}) {

    const decadeColor = decadesManifest[props.decade as keyof typeof decadesManifest].color;

    const getCardToRender = (markerType: string) => {
      switch(markerType) {
        case "product":
          return <ProductCardRoom decade={props.decade} product={props.marker.markerPayload as Product.Product} />
        case "image":
        case "video":
          return <ResourceCardModal decade={props.decade} resourcePayload={props.marker.markerPayload as MarkerResourcePayload} />
        case "audio":
          return <ResourceCardModal decade={props.decade} resourcePayload={props.marker.markerPayload as MarkerResourcePayload} 
            onAudioPlay={props.onAudioPlayerPlay!} onAudioPause={props.onAudioPlayerPause!} onModalClose={props.onModalClose} />
      }
    }

    return (
      <>
        <Modal onClose={props.onModalClose} isOpen={props.isOpen}>
          <ModalOverlay />
          <ModalContent rounded={"lg"}>
            <ModalBody rounded={"lg"} style={{background: 'linear-gradient(120deg, ' + decadeColor + ' 0%, #000000 130%)'}} p={5}>
              {
                getCardToRender(props.marker.markerType)
              }
            </ModalBody>
          </ModalContent>
        </Modal>
      </>
    )
  }