import CustomLoading from "@/app/component/loading/Custom";
import ArrowLeftList from "@/components/icons/ArrowLeftList";
import { Button } from "@mui/material";
import Image from "next/image";
import { useRef } from "react";

function ListBime({ data }) {
  const list = useRef();

  const handleScroll = (type) => {
    list.current.scrollBy({
      left: type === "left" ? -200 : 200,
      behavior: "smooth",
    });
  };

  return (
    <div className="w-full relative">
      <Button
        variant="outlined"
        onClick={() => handleScroll("right")}
        className="!border-[#EFEFEF] !hidden md:!flex !bg-[#FFF] !absolute !right-[-24px] !top-1/2 !-translate-y-1/2 !rounded-full !min-w-fit !p-0 !w-[48px] !h-[48px] !z-20 !rotate-180"
      >
        <ArrowLeftList />
      </Button>
      <ul
        ref={list}
        className="flex overflow-auto hidden-scroll mt-[8px] items-center justify-start xl:justify-center gap-[8px] sm:gap-[13px] md:gap-[19px] lg:gap-[24px]"
      >
        {data?.list_bime?.map((item, idx) => (
          <CustomLoading width={156} height={110}>
            <li
              key={idx}
              className="p-[16px] min-w-[156px] w-full border border-[#EFEFEF] flex flex-col items-center justify-center gap-[20px]"
            >
              <Image src={item.img} height={92} width={92} alt="bime" />
              <h3 className="text-[#525252] text-[16px] font-medium">
                {item.name}
              </h3>
            </li>
          </CustomLoading>
        ))}
        <Button
          variant="outlined"
          onClick={() => handleScroll("left")}
          className="!border-[#EFEFEF] !hidden md:!flex !bg-[#FFF] !absolute !left-[-24px] !top-1/2 !-translate-y-1/2 !rounded-full !min-w-fit !p-0 !w-[48px] !h-[48px] !z-20"
        >
          <ArrowLeftList />
        </Button>
      </ul>
    </div>
  );
}

export default ListBime;
