import PCBannerScrollList from "@src/components/pc/BannerScrollList";
import MobileBannerScrollList from "@src/components/mobile/BannerScrollList";
import React, { useMemo } from "react";
import { INFT } from "metarare";

interface IOwnProps {
  list: INFT[];
}

const BannerScrollList: React.FC<IOwnProps> = ({ list }) => {
  const hideFromListIds = [
    12910, 12911, 12912, 12913, 12915, 12916, 12917, 12918, 12919, 12920, 12921,
    12922, 12923, 12924, 12925, 12926, 12927, 12928, 12929, 12930, 12934, 12935,
    12936, 12937, 12938, 12939, 12940, 12941, 12942, 12943, 12946, 12947, 12948,
    12949, 12950, 12956, 12957, 12958, 12959, 12960
  ];

  const listAfterHide = useMemo(() => {
    return list.filter((item) => {
      return !hideFromListIds.includes(item.sale_id);
    });
  }, [list]);
  return (
    <>
      <div className={"mo_wrapper"}>
        <MobileBannerScrollList list={listAfterHide} />
      </div>
      <div className={"pc_wrapper"}>
        <PCBannerScrollList list={listAfterHide} />
      </div>
    </>
  );
};

export default BannerScrollList;
