import { motion } from "framer-motion";
import { useLanguage } from "@/contexts/LanguageContext";
import { ProjectCard } from "@/components/ProjectCard";
import { Server, Gamepad2, Cloud, Terminal, Box } from "lucide-react";

export const ProjectsSection = () => {
  const { t } = useLanguage();

  const projects = [
    {
      key: "nas",
      icon: <Server className="w-6 h-6 text-primary" />,
    },
    {
      key: "transcendence",
      icon: <Gamepad2 className="w-6 h-6 text-primary" />,
    },
    {
      key: "cloud",
      icon: <Cloud className="w-6 h-6 text-primary" />,
    },
    {
      key: "minishell",
      icon: <Terminal className="w-6 h-6 text-primary" />,
    },
    {
      key: "cube3d",
      icon: <Box className="w-6 h-6 text-primary" />,
    },
  ];

  return (
    <section id="projects" className="py-20 md:py-32">
      <div className="container mx-auto px-4">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.5 }}
          className="text-center mb-16"
        >
          <h2 className="text-4xl md:text-5xl font-bold mb-4">
            {t("projects.title")}
          </h2>
          <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
            {t("projects.subtitle")}
          </p>
        </motion.div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {projects.map((project, index) => (
            <ProjectCard
              key={project.key}
              title={t(`projects.items.${project.key}.title`)}
              description={t(`projects.items.${project.key}.description`)}
              icon={project.icon}
              delay={index * 0.1}
            />
          ))}
        </div>
      </div>
    </section>
  );
};