"use client";
'use strict';

var framerMotion = require('framer-motion');
var clsx = require('clsx');
var tailwindMerge = require('tailwind-merge');
var img = require('@page-speed/img');
var jsxRuntime = require('react/jsx-runtime');

// components/blocks/gallery/masonry-motion-grid.tsx
function cn(...inputs) {
  return tailwindMerge.twMerge(clsx.clsx(inputs));
}
var defaultColumn1Images = [
  {
    src: "https://toastability-production.s3.amazonaws.com/xlp46pzk3a4d73jgjx4s7xdafwpn",
    alt: "Gallery Image 1",
    height: "23rem"
  },
  {
    src: "https://toastability-production.s3.amazonaws.com/g1iuifb3yzoofo9c7a00koyn6q1t",
    alt: "Gallery Image 2",
    height: "28rem"
  },
  {
    src: "https://toastability-production.s3.amazonaws.com/z9u4sdrj2oq3eds0qyui0nxsus3j",
    alt: "Gallery Image 3",
    height: "12rem"
  }
];
var defaultColumn2Images = [
  {
    src: "https://toastability-production.s3.amazonaws.com/63aotyt2pb4gqpccej2kkw8reson",
    alt: "Gallery Image 4",
    height: "13rem"
  },
  {
    src: "https://toastability-production.s3.amazonaws.com/pjgb223h1bjywdk15i3zi7pjhutg",
    alt: "Gallery Image 5",
    height: "32rem"
  },
  {
    src: "https://toastability-production.s3.amazonaws.com/xlp46pzk3a4d73jgjx4s7xdafwpn",
    alt: "Gallery Image 6",
    height: "18rem"
  }
];
var defaultColumn3Images = [
  {
    src: "https://toastability-production.s3.amazonaws.com/g1iuifb3yzoofo9c7a00koyn6q1t",
    alt: "Gallery Image 7",
    height: "32rem"
  },
  {
    src: "https://toastability-production.s3.amazonaws.com/z9u4sdrj2oq3eds0qyui0nxsus3j",
    alt: "Gallery Image 8",
    height: "32rem"
  }
];
var defaultColumn4Images = [
  {
    src: "https://toastability-production.s3.amazonaws.com/63aotyt2pb4gqpccej2kkw8reson",
    alt: "Gallery Image 9",
    height: "13rem"
  },
  {
    src: "https://toastability-production.s3.amazonaws.com/pjgb223h1bjywdk15i3zi7pjhutg",
    alt: "Gallery Image 10",
    height: "22.5rem"
  },
  {
    src: "https://toastability-production.s3.amazonaws.com/xlp46pzk3a4d73jgjx4s7xdafwpn",
    alt: "Gallery Image 11",
    height: "22rem"
  }
];
function MasonryMotionGrid({
  column1Images = defaultColumn1Images,
  column2Images = defaultColumn2Images,
  column3Images = defaultColumn3Images,
  column4Images = defaultColumn4Images,
  className,
  optixFlowConfig
}) {
  const renderColumn = (images, direction) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-4", children: images.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(
    framerMotion.motion.div,
    {
      initial: {
        opacity: 0,
        scale: 0.9,
        y: direction === "up" ? 50 : -50
      },
      whileInView: {
        opacity: 1,
        scale: 1,
        y: 0
      },
      transition: {
        duration: 0.5,
        delay: index * 0.1
      },
      className: "w-full overflow-hidden rounded-2xl bg-muted",
      style: { height: image.height },
      children: /* @__PURE__ */ jsxRuntime.jsx(
        img.Img,
        {
          className: "h-full w-full rounded-2xl object-cover",
          src: image.src,
          alt: image.alt,
          loading: "lazy",
          optixFlowConfig
        }
      )
    },
    index
  )) });
  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("py-32", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative container", children: [
    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4 md:grid-cols-4", children: [
      renderColumn(column1Images, "up"),
      renderColumn(column2Images, "down"),
      renderColumn(column3Images, "up"),
      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-4", children: [
        column4Images.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(
          framerMotion.motion.div,
          {
            initial: {
              opacity: 0,
              scale: 0.9,
              y: -50
            },
            whileInView: {
              opacity: 1,
              scale: 1,
              y: 0
            },
            transition: {
              duration: 0.5,
              delay: index * 0.1
            },
            className: "w-full overflow-hidden rounded-2xl bg-muted",
            style: { height: image.height },
            children: /* @__PURE__ */ jsxRuntime.jsx(
              img.Img,
              {
                className: "h-full w-full rounded-2xl object-cover",
                src: image.src,
                alt: image.alt,
                loading: "lazy",
                optixFlowConfig
              }
            )
          },
          index
        )),
        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-17 w-full rounded-2xl bg-muted" })
      ] })
    ] }),
    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 grid grid-cols-2 gap-4 md:grid-cols-4", children: [
      renderColumn(column1Images, "up"),
      renderColumn(column2Images, "down"),
      renderColumn(column3Images, "up"),
      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-4", children: [
        column4Images.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(
          framerMotion.motion.div,
          {
            initial: {
              opacity: 0,
              scale: 0.9,
              y: -50
            },
            whileInView: {
              opacity: 1,
              scale: 1,
              y: 0
            },
            transition: {
              duration: 0.5,
              delay: index * 0.1
            },
            className: "w-full overflow-hidden rounded-2xl bg-muted",
            style: { height: image.height },
            children: /* @__PURE__ */ jsxRuntime.jsx(
              img.Img,
              {
                className: "h-full w-full rounded-2xl object-cover",
                src: image.src,
                alt: image.alt,
                loading: "lazy",
                optixFlowConfig
              }
            )
          },
          index
        )),
        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-17 w-full rounded-2xl bg-muted" })
      ] })
    ] })
  ] }) });
}

exports.MasonryMotionGrid = MasonryMotionGrid;
//# sourceMappingURL=masonry-motion-grid.cjs.map
//# sourceMappingURL=masonry-motion-grid.cjs.map