"use client ";

import React from "react";
import p1 from "../../public/images/product/1.png";
import p2 from "../../public/images/product/2.png";
import p3 from "../../public/images/product/3.png";
import p4 from "../../public/images/product/4.png";
import Image from "next/image";

const GalleryBox = ({ file }) => {
  console.log(file && file[0]?.fileLocation);
  return (
    <div className=" w-full rounded-3xl">
      <div className="flex justify-center   xs:pb-[10px] lg:py-10">
        <div className="xs:w-[190px] lg:w-[290px]">
          {!!file ? (
            <Image
              src={`${process.env.NEXT_PUBLIC_STORAGE_URL}/${
                file && file[0].fileLocation
              }`}
              width={500}
              height={500}
              className="xs:!w-[110px] lg:!w-[130px] mx-auto !object-cover"
            />
          ) : (
            <div className="xs:!w-[85px] lg:!w-[85px] ">
              {/* <Image
                src={logo}
                className="xs:!w-[70px] lg:!w-[70px] mx-auto !object-cover opacity-25 mt-5"
              /> */}
            </div>
          )}
        </div>
      </div>

      <div className="flex overflow-x-auto p-3 " id="swich-scrollbar">
        <div className="rounded-3xl bg-gray-200  p-3 ml-2 inline-block">
          <div className="xs:w-[50px] lg:w-[80px]">
            <Image src={p1} />
          </div>
        </div>
        <div className="rounded-3xl bg-gray-200  p-3 ml-2">
          <div className="xs:w-[50px] lg:w-[80px]">
            <Image src={p2} />
          </div>
        </div>
        <div className="rounded-3xl bg-gray-200  p-3 ml-2">
          <div className="xs:w-[50px] lg:w-[80px]">
            <Image src={p3} />
          </div>
        </div>

        <div className="rounded-3xl bg-gray-200  p-3 ml-2">
          <div className="xs:w-[50px] lg:w-[80px]">
            <Image src={p4} />
          </div>
        </div>

        <div className="rounded-3xl bg-gray-200  p-3 ml-2 inline-block">
          <div className="xs:w-[50px] lg:w-[80px]">
            {" "}
            <Image src={p1} />
          </div>
        </div>
        <div className="rounded-3xl bg-gray-200  p-3 ml-2">
          <div className="xs:w-[50px] lg:w-[80px]">
            {" "}
            <Image src={p2} />
          </div>
        </div>
        <div className="rounded-3xl bg-gray-200  p-3 ml-2">
          <div className="xs:w-[50px] lg:w-[80px]">
            {" "}
            <Image src={p3} />
          </div>
        </div>

        <div className="rounded-3xl bg-gray-200  p-3 ml-2">
          <div className="xs:w-[50px] lg:w-[80px]">
            {" "}
            <Image src={p4} />
          </div>
        </div>
      </div>
    </div>
  );
};

export default GalleryBox;