"use client";

import { motion } from "framer-motion";
import React from "react";

import { cn } from "@/lib/utils";

interface ImageData {
  src: string;
  alt: string;
}

const images: ImageData[] = [
  {
    src: "/block-media/shadcnblocks/block/lummi/bw1.jpeg",
    alt: "حالت موفقیت پس از ثبت",
  },
  {
    src: "/block-media/shadcnblocks/block/lummi/bw2.jpeg",
    alt: "کارت‌ها در تم گرم غروب",
  },
  {
    src: "/block-media/shadcnblocks/block/lummi/bw3.jpeg",
    alt: "نمای کلی گسترده داشبورد",
  },
  {
    src: "/block-media/shadcnblocks/block/lummi/bw4.jpeg",
    alt: "کارت‌های شاخص با تم گرم",
  },
  {
    src: "/block-media/shadcnblocks/block/lummi/bw5.jpeg",
    alt: "نمای رابط در حالت تک‌رنگ",
  },
  {
    src: "/block-media/shadcnblocks/block/lummi/bw6.jpeg",
    alt: "ترکیب‌بندی تک‌رنگ معاصر رابط",
  },
  {
    src: "/block-media/shadcnblocks/block/lummi/bw7.jpeg",
    alt: "نمای خواندن محتوا در تم روشن",
  },
  {
    src: "/block-media/shadcnblocks/block/lummi/bw8.jpeg",
    alt: "منوی کشویی روی پس‌زمینه ملایم",
  },
  {
    src: "/block-media/shadcnblocks/block/lummi/bw9.jpeg",
    alt: "رابط مینیمال",
  },
  {
    src: "/block-media/shadcnblocks/block/lummi/bw10.jpeg",
    alt: "فرم ثبت‌نام با اعتبارسنجی زنده",
  },
  {
    src: "/block-media/shadcnblocks/block/lummi/bw11.jpeg",
    alt: "چیدمان کارت‌ها روی پس‌زمینه ملایم",
  },
  {
    src: "/block-media/shadcnblocks/block/lummi/bw12.jpeg",
    alt: "رابط مینیمال با فضای خالی سنجیده و ریتم منظم",
  },
];

interface Projects11Props {
  className?: string;
}

const Projects11 = ({ className }: Projects11Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="columns-1 gap-4 space-y-4 md:columns-2 md:gap-6 md:space-y-6 lg:columns-3">
          {images.map((image, index) => (
            <motion.div
              key={index}
              className="mb-4 break-inside-avoid md:mb-6"
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6, delay: index * 0.05 }}
            >
              <div className="group relative overflow-hidden border-border transition-all duration-300">
                <motion.img
                  src={image.src}
                  alt={image.alt}
                  className="h-auto w-full object-cover transition-transform duration-300 ease-in-out group-hover:scale-105 group-hover:brightness-105"
                />
                <div className="absolute inset-0 bg-black/0 transition-all duration-300 group-hover:bg-black/10" />
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Projects11 };