card_grid.tsx

import { SectionItem } from '@/types/product_page/productType';
import React from 'react';
import CategoryCard from '../homepage/category/category_card';

const CardGrid = ({ data }: { data: SectionItem }) => {
  const { bg_color, text_color, heading, description, cards, type } = data;

  return (
    <div
      style={{
        background: bg_color,
        color: text_color,
      }}
      className="w-full py-6 md:py-14 px-4"
    >
      <h1 className="text-3xl lg:text-4.5xl font-bold text-center mb-4">
        {heading}
      </h1>
      {description && (
        <div className="w-full mb-6">
          <p className="font-medium transition-all duration-500 text-[16px] font-proxima_font text-center max-w-screen-md mx-auto">
            {description}
          </p>
        </div>
      )}
      <div className="max-w-7xl w-full mx-auto">
        {/* 1-3-1 Layout */}
        {cards && type === '1-3-1' && (
          <div className="grid grid-cols-1 md:flex md:flex-row gap-4 md:gap-6 md:max-h-[700px]">
            {cards[0] && (
              <div className="flex-1 aspect-square">
                <CategoryCard product_page data={cards[0]} main />
              </div>
            )}
            <div className="flex flex-col gap-4 md:gap-6 flex-[2]">
              <div className="flex flex-col md:flex-row gap-4 md:gap-6 flex-1">
                {cards.slice(1, 4).map(
                  (item, index) =>
                    item && (
                      <div key={index} className="flex-1 aspect-square">
                        <CategoryCard product_page data={item} />
                      </div>
                    )
                )}
              </div>
              {cards[4] && (
                <div className="flex-1 h-10 aspect-square">
                  <CategoryCard product_page data={cards[4]} main />
                </div>
              )}
            </div>
          </div>
        )}
        {/* 2-2 Layout */}
        {cards && type === '2-2' && (
          <div className="grid grid-cols-1 md:flex md:flex-row gap-4 md:gap-6 md:max-h-[700px]">
            <div className="flex flex-col gap-4 md:gap-6 flex-1 md:flex-[2]">
              {cards[0] && (
                <div className="flex-1 h-10">
                  <CategoryCard product_page data={cards[0]} main />
                </div>
              )}
              {cards[2] && (
                <div className="flex-1 md:flex-[1.5] aspect-square">
                  <CategoryCard product_page data={cards[2]} main />
                </div>
              )}
            </div>
            <div className="flex flex-col gap-4 md:gap-6 flex-1">
              {cards[1] && (
                <div className="flex-1 md:flex-[1.5]">
                  <CategoryCard product_page data={cards[1]} main />
                </div>
              )}
              {cards[3] && (
                <div className="flex-1 h-10">
                  <CategoryCard product_page data={cards[3]} main />
                </div>
              )}
            </div>
          </div>
        )}
        {/* 2-2-2 Layout */}
        {cards && type === '2-2-2' && (
          <div className="grid grid-cols-1 md:flex md:flex-row gap-4 md:gap-6 md:max-h-[700px]">
            <div className="flex flex-col gap-4 md:gap-6 flex-1">
              {cards[0] && (
                <div className="flex-1 aspect-square h-10">
                  <CategoryCard product_page data={cards[0]} main />
                </div>
              )}
              {cards[3] && (
                <div className="flex-1 aspect-square h-10">
                  <CategoryCard product_page data={cards[3]} main />
                </div>
              )}
            </div>
            <div className="flex flex-col gap-4 md:gap-6 flex-1">
              {cards[1] && (
                <div className="flex-1 md:flex-[1.5] h-10">
                  <CategoryCard product_page data={cards[1]} main />
                </div>
              )}
              {cards[4] && (
                <div className="flex-1">
                  <CategoryCard product_page data={cards[4]} main />
                </div>
              )}
            </div>
            <div className="flex flex-col gap-4 md:gap-6 flex-1">
              {cards[2] && (
                <div className="flex-1 aspect-square h-10">
                  <CategoryCard product_page data={cards[2]} main />
                </div>
              )}
              {cards[5] && (
                <div className="flex-1 aspect-square h-10">
                  <CategoryCard product_page data={cards[5]} main />
                </div>
              )}
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

export default CardGrid;