import React from "react";

import { useSelector } from "react-redux";

import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";

import ItemContents from "./ItemContents/ItemContents";
import ShowContents from "./ShowContents/ShowContents";

const Container = SpotlightContainerDecorator(
  { leaveFor: { left: "", right: "" }, enterTo: "last-focused" },
  "div"
);

export default function CategoryContents({ activeTab }) {
  const datas = useSelector((state) => state.main.subCategoryData);

  return (
    <Container>
      {activeTab === "SHOW" ? <ShowContents /> : <ItemContents />}
    </Container>
  );
}
