// Built with BentoGrid.dev

const gridData = [
  {
      "items": [
        {
          "style": {
            "gridColumnEnd": "span 2",
            "gridRowEnd": "span 2",
            "backgroundColor": "#fff"
          },
          "content": {
            "items": [
              {
                "title": "Title"
              },
              {
                "subTitle": "Subtitle"
              },
              {
                "description": "Description"
              },
              {
                "button": "Button"
              },
              {
                "buttonLink": "https://www.google.com"
              },
              {
                "imageSrc": "/hero.jpg"
              }
            ]
          }
        },
        ...
      ]
    }
  }
]

export default function FourColBentoGrid() {
  const items = gridData.gridContainer.items;
  const { className, style, items } = gridData.gridContainer;

  return (
    <section className="max-w-7xl md:flex w-full gap-12 items-center p-6 mx:p-6">
    <div className="cursor-pointer grid grid-cols-4 gap-6 max-w-7xl mx-auto rounded-md my-12 w-full order-1 md:order-2 bg-white p-4 shadow" style={style}>
      {items.map((item, index) => (
        <div key={index} className="rounded-md border relative min-h-36 w-full shadow hover:shadow-xl transition-all duration-300" style={item.style} />
      ))}
    </div>
  </section>
  );
}