import React from "react";

import { useSelector } from "react-redux";

import HotelProduct from "./HotelProduct";
import ShowProduct from "./ShowProduct";
import css from "./ThemeProduct.module.less";
import { LOG_MENU } from "../../../utils/Config";

export default function ThemeProduct({
  isOnTop,
  panelInfo,
  selectedCurationId,
  selectedCurationNm,
  selectedIndex,
  selectedPatnrId,
  setSelectedIndex,
  themeType,
  isLoading,
  shopByMobileLogRef,
  isYouMayLikeOpened,
}) {
  return (
    <div className={css.container}>
      {themeType === "theme" && (
        <ShowProduct
          isOnTop={isOnTop}
          panelInfo={panelInfo}
          launchedFromPlayer={panelInfo?.launchedFromPlayer}
          selectedIndex={selectedIndex}
          selectedCurationId={selectedCurationId}
          selectedCurationNm={selectedCurationNm}
          selectedPatnrId={selectedPatnrId}
          setSelectedIndex={setSelectedIndex}
          shopByMobileLogRef={shopByMobileLogRef}
          isYouMayLikeOpened={isYouMayLikeOpened}
          logMenu={LOG_MENU.DETAIL_PAGE_THEME_DETAIL}
          isLoading={isLoading}
        />
      )}
      {themeType === "hotel" && (
        <HotelProduct
          isOnTop={isOnTop}
          panelInfo={panelInfo}
          launchedFromPlayer={panelInfo?.launchedFromPlayer}
          selectedIndex={selectedIndex}
          setSelectedIndex={setSelectedIndex}
          shopByMobileLogRef={shopByMobileLogRef}
          isYouMayLikeOpened={isYouMayLikeOpened}
          isLoading={isLoading}
        />
      )}
    </div>
  );
}
