import React from "react";
import { useSelector } from "react-redux";

import NoResultsImage from "../../../../../assets/images/searchpanel/img-search-nodata.png";
import { $L } from "../../../../utils/helperMethods";
import PopularShow from "../../../HomePanel/PopularShow/PopularShow";
import css from "./NoResultsCategoryShow.module.less";

export default function NoResultsCategoryShows() {
  const topInfos = useSelector((state) => state.main?.top20ShowData?.topInfos);
  return (
    <div className={css.container}>
      <div className={css.info}>
        <div className={css.imageBox}>
          <img src={NoResultsImage} alt="THERE ARE NO SHOWS AVAILABLE" />
        </div>
        <p>{$L("THERE ARE NO SHOWS AVAILABLE")}</p>
      </div>
      {topInfos?.length > 0 && (
        <div className={css.popularShowWrap}>
          <PopularShow homeChk={false} />
        </div>
      )}
    </div>
  );
}
