import { 
  GraduationCap, 
  Binary, 
  Users, 
  Cpu, 
  Database, 
  Gamepad2, 
  CreditCard,
  Calculator,
  Puzzle,
  Sparkles,
  Trophy
} from "lucide-react";
import Layout from "@/components/Layout";
import ThemeCard from "@/components/ThemeCard";

const Themes = () => {
  const themes = [
    {
      title: "Discrete Math",
      description: "Explore fundamental concepts in discrete mathematics through visual and interactive demonstrations.",
      path: "/themes/discrete-math",
      icon: <Binary className="w-6 h-6" />
    },
    {
      title: "Social Choice",
      description: "Understand voting systems, fairness criteria, and collective decision-making through interactive simulations.",
      path: "/themes/social-choice",
      icon: <Users className="w-6 h-6" />
    },
    {
      title: "Advanced Algorithms",
      description: "Deep dive into complex algorithmic concepts with step-by-step visualizations and performance analysis.",
      path: "/themes/advanced-algorithms",
      icon: <Cpu className="w-6 h-6" />
    },
    {
      title: "Data Structures",
      description: "Master fundamental and advanced data structures through interactive manipulation and visualization.",
      path: "/themes/data-structures",
      icon: <Database className="w-6 h-6" />
    },
    {
      title: "Games",
      description: "Learn through play with educational games that reinforce computer science and mathematical concepts.",
      path: "/themes/games",
      icon: <Gamepad2 className="w-6 h-6" />
    },
    {
      title: "Cards and Math",
      description: "Discover mathematical principles and probability theory through card games and interactive demonstrations.",
      path: "/themes/cards-math",
      icon: <CreditCard className="w-6 h-6" />
    },
    {
      title: "Puzzles",
      description: "Get ready for an engaging collection of educational puzzles designed to challenge your problem-solving skills and reinforce key concepts across multiple disciplines.",
      path: "/themes/puzzles",
      icon: <Puzzle className="w-6 h-6" />
    },
    {
      title: "Miscellany",
      description: "Discover unique educational experiments, creative tools, and innovative interactive content that doesn't fit into traditional categories but sparks curiosity and enhances learning.",
      path: "/themes/miscellany",
      icon: <Sparkles className="w-6 h-6" />
    },
    {
      title: "Contest Problems",
      description: "Practice with problems from programming competitions, mathematical olympiads, and algorithmic challenges with interactive solutions and explanations.",
      path: "/themes/contest-problems",
      icon: <Trophy className="w-6 h-6" />
    }
  ];

  return (
    <Layout>
      
      <div className="py-12 px-4">
        <div className="max-w-6xl mx-auto">

          <div className="grid lg:grid-cols-3 md:grid-cols-2 gap-6">
            {themes.map((theme) => (
              <ThemeCard
                key={theme.title}
                title={theme.title}
                description={theme.description}
                path={theme.path}
                icon={theme.icon}
              />
            ))}
          </div>

        </div>
      </div>
    </Layout>
  );
};

export default Themes;