"use client";
import { cn } from "@/lib/utils";
import { motion } from "motion/react";
import { useRef } from "react";
import {
  FadeIn,
  FadeInStagger,
} from "@/components/fade-in/components/fade-in";
import { Container } from "@/components/container/components/container";
import { Image } from "@/components/image/components/image";

interface ImageGroupProps {
  images: {
    src: string;
    alt?: string;
    width: number;
    height: number;
  }[];
  className?: string;
}

const styles = [
  "col-start-1 col-end-5 mt-[46.33%] ml-[-26%]",
  "col-start-3 col-end-7 z-10 mt-[25%]",
  "col-start-6 col-end-11 mt-[36%]",
  "col-start-10 col-end-13",
] as const;

const IMAGES = [
  {
    src: "https://images.unsplash.com/photo-1589271243958-d61e12b61b97?q=80&w=420&h=420&fit=crop",
    alt: "Sample image",
    width: 420,
    height: 420,
  },
  {
    src: "https://images.unsplash.com/photo-1745276235358-8771fa7eafc5?q=80&w=420&h=420&fit=crop",
    alt: "Sample image 1",
    width: 420,
    height: 420,
  },
  {
    src: "https://images.unsplash.com/flagged/photo-1585685658301-207e41adf1c3?q=80&w=530&h=530&fit=crop",
    alt: "Sample image 2",
    width: 530,
    height: 530,
  },
  {
    src: "https://images.unsplash.com/photo-1712479802773-df8d94c5fb29?q=80&w=320&h=320&fit=crop",
    alt: "Sample image 3",
    width: 320,
    height: 320,
  },
];

export function ImageGroup({ images = IMAGES, className }: ImageGroupProps) {
  const containerRef = useRef<HTMLDivElement>(null);

  return (
    <Container
      className="grid gap-2 mx-auto max-w-7xl"
      wrapperClassName="py-32"
    >
      <FadeInStagger>
        <div
          ref={containerRef}
          className={cn(
            "grid grid-cols-12 gap-4 relative z-0 pb-[6%]",
            className,
          )}
        >
          {images.map((image, index) => {
            return (
              <div
                key={image.src}
                className={cn(
                  "object-cover grid [grid-row:1] aspect-square w-full",
                  styles[index % styles.length],
                )}
              >
                <FadeIn>
                  <Image
                    key={image.src}
                    {...image}
                    src={image.src}
                    alt={image.alt ?? ""}
                    className="w-full h-full object-cover rounded-inherit rounded-2xl md:rounded-3xl"
                  />
                </FadeIn>
              </div>
            );
          })}
          <motion.div className="[grid-row:1] col-start-3 col-end-8 rounded-2xl md:rounded-3xl z-[-1] mt-[25%] aspect-square w-full bg-primary/10" />
          <motion.div className="[grid-row:1] col-start-6 col-end-11 rounded-2xl md:rounded-3xl z-[-1] mt-[48%] -ml-[22%] aspect-square w-full bg-primary/20 -rotate-[15deg]" />
        </div>
      </FadeInStagger>
    </Container>
  );
}
Image groups
