"use client";

import React from "react";
import { motion, Variants } from "framer-motion";
import { GlobalCard, GlobalCardData } from "./GlobalCard";

interface DynamicGridProps {
  items: GlobalCardData[];
  title?: string;
  subtitle?: string;
  isLoading?: boolean;
}

// Framer Motion Variants
const containerVariants: Variants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.15, // Delay between each card animation
      delayChildren: 0.2,
    },
  },
};

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

// Skeleton Loading Component
function SkeletonCard() {
  return (
    <div className="flex flex-col bg-white rounded-2xl overflow-hidden shadow-sm border border-gray-100 animate-pulse h-full">
      <div className="w-full h-56 bg-gray-200" />
      <div className="p-5 flex flex-col flex-grow">
        <div className="h-6 bg-gray-200 rounded w-3/4 mb-4" />
        <div className="flex gap-3 mb-4">
          <div className="h-4 bg-gray-200 rounded w-1/4" />
          <div className="h-4 bg-gray-200 rounded w-1/4" />
        </div>
        <div className="mt-auto pt-4 border-t border-gray-100 flex items-center justify-between">
          <div className="flex flex-col gap-1 w-1/2">
            <div className="h-3 bg-gray-200 rounded w-1/2" />
            <div className="h-5 bg-gray-200 rounded w-3/4" />
          </div>
          <div className="h-8 bg-gray-200 rounded-full w-24" />
        </div>
      </div>
    </div>
  );
}

export function DynamicGrid({ items, title, subtitle, isLoading = false }: DynamicGridProps) {
  return (
    <section className="py-20 bg-white relative overflow-hidden">
      {/* Decorative Background Elements */}
      <div className="absolute top-0 right-0 w-64 h-64 bg-ranata-light/5 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2" />
      <div className="absolute bottom-0 left-0 w-96 h-96 bg-ranata-dark/5 rounded-full blur-3xl translate-y-1/2 -translate-x-1/2" />

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        
        {/* Section Header */}
        {(title || subtitle) && (
          <motion.div 
            initial={{ opacity: 0, y: -20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true, margin: "-100px" }}
            transition={{ duration: 0.6 }}
            className="text-center mb-16"
          >
            {subtitle && (
              <span className="inline-block py-1 px-3 rounded-full bg-ranata-light/10 text-ranata-dark text-[11px] font-black uppercase tracking-widest mb-4">
                {subtitle}
              </span>
            )}
            {title && (
              <h2 className="text-3xl md:text-5xl font-black text-slate-900 tracking-tight">
                {title}
              </h2>
            )}
          </motion.div>
        )}

        {/* Dynamic Grid / Horizontal Scroll for Mobile */}
        <motion.div 
          variants={containerVariants}
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true, margin: "-50px" }}
          className="flex overflow-x-auto pb-8 -mx-4 px-4 snap-x snap-mandatory md:grid md:grid-cols-2 lg:grid-cols-4 md:overflow-visible md:pb-0 md:px-0 md:mx-0 md:gap-6 lg:gap-8 scrollbar-hide"
        >
          {isLoading ? (
            // Render Skeletons
            Array.from({ length: 4 }).map((_, index) => (
              <motion.div 
                key={`skeleton-${index}`} 
                variants={itemVariants}
                className="w-[85vw] sm:w-[60vw] md:w-auto shrink-0 snap-center mr-4 md:mr-0 last:mr-0"
              >
                <SkeletonCard />
              </motion.div>
            ))
          ) : (
            // Render Real Items
            items.map((item) => (
              <motion.div 
                key={item.id} 
                variants={itemVariants}
                className="w-[85vw] sm:w-[60vw] md:w-auto shrink-0 snap-center mr-4 md:mr-0 last:mr-0"
              >
                <GlobalCard data={item} />
              </motion.div>
            ))
          )}
        </motion.div>

      </div>
    </section>
  );
}