import React, { memo } from "react";

import ImgContentsLoading from "../../../../../assets/images/img-contents-loading@3x.png";
import { $L } from "../../../../utils/helperMethods";
import css from "./ListEmptyContents.module.less";

const STRING_CONF = {
  PRODUCT: "Product",
  THEME: "Theme",
};

const ListEmptyContents = ({ tabIndex = 0 }) => {
  return (
    <figure className={css.container}>
      <img src={ImgContentsLoading} alt="" />
      <figcaption>
        {$L("Loading {tabName} Details. Please Wait").replace(
          "{tabName}",
          tabIndex === 0 ? STRING_CONF.PRODUCT : STRING_CONF.THEME
        )}
      </figcaption>
    </figure>
  );
};

export default memo(ListEmptyContents);
