"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 = () => {
  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]">
          <Image src={p4} />
        </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;