function chunkArray(arr: number[], cnt: number) {
  const resultArray = [];
  for (let i = 0; i < arr.length; i += cnt) {
    const chunk = arr.slice(i, i + cnt);
    resultArray.push(chunk);
  }
  return resultArray;
}

const ClientsContainer = () => {
  const imageIndexes = Array.from({ length: 55 }, (_, i) => i + 1);
  const imageSections = chunkArray(imageIndexes, 4);

  return (
    <div className="bg-white py-36">
      <div className="container xl:max-w-[1440px] mx-auto overflow-hidden">
        {imageSections.map((section, index) => {
          return (
            <div
              className="border-b grid grid-cols-4 last:border-b-0"
              key={index}
            >
              <div className="border-r p-5 last:border-r-0 flex items-center justify-center">
                <img
                  src={`/images/clients/clients-${section[0]}.jpg`}
                  alt=""
                  className="w-[130px]"
                />
              </div>
              <div className="border-r p-5 last:border-r-0 flex items-center justify-center">
                <img
                  src={`/images/clients/clients-${section[1]}.jpg`}
                  alt=""
                  className="w-[130px]"
                />
              </div>
              <div className="border-r p-5 last:border-r-0 flex items-center justify-center">
                <img
                  src={`/images/clients/clients-${section[2]}.jpg`}
                  alt=""
                  className="w-[130px]"
                />
              </div>
              <div className="border-r p-5 last:border-r-0 flex items-center justify-center">
                <img
                  src={`/images/clients/clients-${section[3]}.jpg`}
                  alt=""
                  className="w-[130px]"
                />
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default ClientsContainer;
