import React from "react";

import { useSelector } from "react-redux";

import NoSearchResultsImage from "../../../../assets/searchpanel/img-search-nodata.png";
import SectionTitle from "../../../components/SectionTitle/SectionTitle";
import TGrid from "../../../components/TGrid/TGrid";
import TItemCard from "../../../components/TItemCard/TItemCard";
import { $L } from "../../../utils/helperMethods";
import css from "./NoSearchResults.module.less";

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

  return (
    <div className={css.container}>
      <div className={css.info}>
        <div className={css.imageBox}>
          <img src={NoSearchResultsImage} alt="No Datas" />
        </div>
        <p>{$L("SORRY, NO RESULTS MATCHING YOUR SEARCH")}</p>
      </div>
      <div className={css.bestSellerWrap}>
        <SectionTitle title={$L("BEST SELLER")} />
        <TGrid>
          {bestSellerDatas &&
            bestSellerDatas
              .slice(0, 5)
              .map((bestSeller) => (
                <TItemCard
                  key={bestSeller.rankOrd}
                  imageSource={bestSeller.imgUrl}
                  imageAlt={bestSeller.prdtNm}
                  productName={bestSeller.prdtNm}
                  priceInfo={bestSeller.priceInfo}
                  rank={bestSeller.rankOrd}
                  isBestSeller
                />
              ))}
        </TGrid>
      </div>
    </div>
  );
}
