'use client';

import { motion } from 'framer-motion';
import PortfolioCard from './PortfolioCard';

interface Project {
  slug: string;
  title: string;
  description: string;
  excerpt?: string;
  technologies: string[];
  category?: string;
  date?: string;
  featured?: boolean;
}

interface PortfolioGridProps {
  projects: Project[];
}

const containerVariants = {
  hidden: {},
  visible: {
    transition: {
      staggerChildren: 0.1,
    },
  },
};

const itemVariants = {
  hidden: { opacity: 0, y: 20 },
  visible: { opacity: 1, y: 0 },
};

const PortfolioGrid = ({ projects }: PortfolioGridProps) => {

  return (
    <motion.div
      variants={containerVariants}
      initial="hidden"
      animate="visible"
      className="grid grid-cols-1 md:grid-cols-2 gap-8"
    >
      {projects.map((project) => (
        <motion.div
          key={project.slug}
          variants={itemVariants}
          transition={{ duration: 0.5 }}
          className="group"
        >
          <PortfolioCard project={project} />
        </motion.div>
      ))}
    </motion.div>
  );
};

export default PortfolioGrid;