import React from "react";

import { useSelector } from "react-redux";

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

import SectionTitle from "../../components/SectionTitle/SectionTitle";
import TGrid from "../../components/TGrid/TGrid";
import TItemCard from "../../components/TItemCard/TItemCard";
import TPanel from "../../components/TPanel/TPanel";
import { $L } from "../../utils/helperMethods";
import css from "./TrendingNowPanel.module.less";

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

export default function TrendingNowPanel() {
  const bestSellerDatas = useSelector(
    (state) => state.product.bestSellerData.bestSeller
  );

  return (
    <TPanel>
      <Container className={css.container}>
        <SectionTitle title={$L(`BEST SELLER`)} />
        <TGrid>
          {bestSellerDatas &&
            bestSellerDatas.map((bestSeller) => (
              <TItemCard
                key={bestSeller.rankOrd}
                imageSource={bestSeller.imgUrl}
                imageAlt={bestSeller.prdtNm}
                productName={bestSeller.prdtNm}
                priceInfo={bestSeller.priceInfo}
                rank={bestSeller.rankOrd}
                isBestSeller
              />
            ))}
        </TGrid>
      </Container>
    </TPanel>
  );
}
