import React from "react"

const SkeletonProduct: React.FunctionComponent = () => {
  let arr = [1,2,3,4]
  return(
    <div className = "mt-[10px] grid grid-cols-2 sm:grid-cols-3 gap-4 pl-[12px] mr-[16px]">
    {arr.map(() =>(
      <div className="border-[1px] border-[#D9D9D9] rounded-[8px] relative bg-white">
        <div className="animate-pulse ">
          <div className="bg-gray-200 h-[154px] m-[10px]"></div>
          <div className="flex-1 space-y-6 py-1">
            <div className="h-2 bg-gray-200 rounded"></div>
            <div className="space-y-3">
              <div className="grid grid-cols-3 gap-4">
                <div className="h-2 bg-gray-200 rounded col-span-2"></div>
                <div className="h-2 bg-gray-200 rounded col-span-1"></div>
              </div>
              <div className="grid grid-cols-3 gap-4">
                <div className="h-2 bg-gray-200 rounded col-span-2"></div>
                <div className="h-2 bg-gray-200 rounded col-span-1"></div>
              </div>
              <div className="h-2 bg-gray-200 rounded"></div>
            </div>
          </div>
        </div>
      </div>
    ))}
    </div>
  )
}

export default SkeletonProduct