"use client";

import { motion } from "framer-motion";
import Link from "next/link";
import Image from "next/image";
import { ArrowRight, ExternalLink } from "lucide-react";

interface ProjectCategory {
  id: string;
  name: string;
  slug: string;
  description: string;
  image: string | null;
}

export default function ProjectGrid({
  categories,
}: {
  categories: ProjectCategory[];
}) {
  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.1,
      },
    },
  };

  const itemVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: {
      opacity: 1,
      y: 0,
      transition: {
        type: "spring",
        stiffness: 100,
        damping: 12,
      },
    },
  };

  const getColorForCategory = (index: number) => {
    const colors = [
      "from-orange-500 to-red-500",
      "from-blue-500 to-indigo-600",
      "from-emerald-500 to-teal-600",
      "from-purple-500 to-pink-500",
      "from-amber-500 to-yellow-500",
      "from-cyan-500 to-blue-500",
      "from-rose-500 to-red-600",
    ];
    return colors[index % colors.length];
  };

  return (
    <motion.div
      variants={containerVariants}
      initial="hidden"
      animate="visible"
      className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
    >
      {categories.map((category, index) => (
        <motion.div
          key={category.id}
          variants={itemVariants}
          whileHover={{
            y: -8,
            transition: { duration: 0.2 },
          }}
          className="group h-full"
        >
          <div className="relative h-full overflow-hidden backdrop-blur-sm bg-white/80 rounded-xl shadow-md border border-gray-100 transition-all duration-300 hover:shadow-xl">
            <div
              className={`h-2 w-full bg-gradient-to-r from-red-700 to-orange-500`}
            ></div>

            <div className="p-6 h-full flex flex-col">
              <div className="flex items-start justify-between mb-4">
                <div
                  className={`w-14 h-14 rounded-lg flex items-center justify-center bg-gradient-to-r from-red-700 to-orange-500 text-white shadow-md`}
                >
                  {category.image ? (
                    <Image
                      src={
                        `${process.env.NEXT_PUBLIC_API_URL || "/placeholder.svg"}/storage/${category.image}` ||
                        "/placeholder.svg"
                      }
                      alt={category.name}
                      width={40}
                      height={40}
                      className="object-cover rounded-lg"
                    />
                  ) : (
                    <span className="text-2xl font-bold">
                      {category.name.charAt(0)}
                    </span>
                  )}
                </div>

                <motion.div
                  initial={{ opacity: 0.5, scale: 0.8 }}
                  whileHover={{
                    opacity: 1,
                    scale: 1.1,
                    rotate: 5,
                    transition: { duration: 0.2 },
                  }}
                  className="w-8 h-8 flex items-center justify-center rounded-full bg-gray-50 text-gray-400 group-hover:text-gray-600"
                >
                  <ExternalLink size={14} />
                </motion.div>
              </div>

              <h3 className="text-xl font-semibold text-gray-900 mb-2 group-hover:text-orange-600 transition-colors">
                {category.name}
              </h3>

              <p className="text-gray-600 flex-grow mb-4">
                {category.description}
              </p>

              <div className="mt-auto">
                <Link
                  href={`/projects/${category.slug}`}
                  className="inline-flex items-center text-sm font-medium text-orange-600 group-hover:text-orange-700"
                >
                  <motion.div
                    whileHover={{ x: 5 }}
                    className="flex items-center"
                  >
                    View Projects
                    <ArrowRight
                      size={16}
                      className="ml-1 opacity-0 group-hover:opacity-100 transition-opacity"
                    />
                  </motion.div>
                </Link>
              </div>
            </div>

            <div
              className={`absolute -bottom-6 -right-6 w-12 h-12 rounded-full bg-gradient-to-br ${getColorForCategory(
                index,
              )} opacity-20`}
            ></div>
          </div>
        </motion.div>
      ))}
    </motion.div>
  );
}