"use client";

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

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

interface Projects14Props {
  className?: string;
}

const Projects14 = ({ className }: Projects14Props) => {
  const hiddenGridIndex = [0, 1, 2, 6, 9];

  const projects = [
    {
      id: 3,
      title: "پلتفرم فروشگاه آنلاین",
      description: "فول‌استک",
      href: "#",
      image: "/block-media/shadcnblocks/block/guri4/img11.png",
    },
    {
      id: 4,
      title: "اپلیکیشن بانکداری موبایل",
      description: "رابط و تجربه کاربری",
      href: "#",
      image: "/block-media/shadcnblocks/block/guri4/img9.png",
    },
    {
      id: 5,
      title: "تولیدکننده محتوای هوش مصنوعی",
      description: "هوش مصنوعی",
      href: "#",
      image: "/block-media/shadcnblocks/block/guri4/img10.png",
    },
    {
      id: 6,
      title: "پلتفرم رسانه‌ای",
      description: "وب‌اپ",
      href: "#",
      image: "/block-media/shadcnblocks/block/guri3/img25.jpeg",
    },
    {
      id: 7,
      title: "ابزار مدیریت پروژه",
      description: "وب‌اپ",
      href: "#",
      image: "/block-media/shadcnblocks/block/guri4/img6.png",
    },
  ];

  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="relative w-full text-start">
          <div className="flex justify-between text-3xl font-medium tracking-tight lg:text-5xl">
            <h1>کارهای منتخب</h1>
            <a
              href="#"
              className="group flex cursor-pointer items-center gap-2 text-muted-foreground hover:text-foreground"
            >
              مشاهده همه مطالعات موردی
              <ArrowUpRight className="size-[1em] transition-transform duration-300 group-hover:rotate-45 rtl:rotate-180" />
            </a>
          </div>
          <div className="grid grid-cols-2 gap-5 md:grid-cols-5">
            {Array.from({ length: 10 }).map((_, index) => {
              if (hiddenGridIndex.includes(index)) {
                return (
                  <div key={index} className="mt-10 opacity-0" aria-hidden />
                );
              }

              const projectIndex =
                index -
                hiddenGridIndex.filter((hidden) => hidden < index).length;
              const project = projects[projectIndex];

              if (!project) return null;

              return (
                <motion.a
                  href={project.href}
                  key={index}
                  initial={{ opacity: 0, y: 50 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5, delay: index * 0.05 }}
                  viewport={{ once: true }}
                  className="group mt-10 flex flex-col gap-2 overflow-hidden text-start"
                >
                  <img
                    src={project.image}
                    alt={project.title}
                    className="h-65 w-full object-cover transition-transform duration-300 group-hover:-translate-y-4 group-hover:scale-110"
                  />
                  <div>
                    <h3 className="text-xl font-medium tracking-tight transition-colors duration-300 group-hover:text-muted-foreground">
                      {project.title}
                    </h3>
                    <p className="text-foreground/40">{project.description}</p>
                  </div>
                </motion.a>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
};

export { Projects14 };