import React from 'react';
import styles from './Education.module.css';

const educationData = [
  {
    degree: "BACHELOR OF COMPUTER ENGINEERING",
    institution: "University of Guelph",
    duration: "2018 - 2023",
    description: "As a graduate in Computer Engineering, my expertise encompasses a wide range of skills essential for modern computing systems. This includes circuit design and development, hardware integration, and system-level design integration. I am well-versed in the science and tools required for designing, constructing, implementing, and maintaining both software and hardware components in computing systems.",
    courses: [
      "Data Structures and Algorithms",
      "Computer Networks",
      "Operating Systems",
      "Digital Systems Design",
      "Embedded Systems Programming"
    ],
    achievements: [
      "Dean's Honor List for 4 consecutive years",
      "Capstone Project Winner: Innovative IoT Solution",
      "Published paper on 'Efficient Algorithms for Edge Computing' in IEEE conference"
    ]
  },
  // Add more education entries if needed
];

function Education() {
  return (
    <section className={styles.education}>
      <h2 className={styles.sectionTitle}>Education</h2>
      {educationData.map((edu, index) => (
        <div key={index} className={styles.entry}>
          <div className={styles.content}>
            <h3 className={styles.degree}>{edu.degree}</h3>
            <p className={styles.institution}>
              {edu.institution} <span className={styles.duration}>| {edu.duration}</span>
            </p>
            <p className={styles.description}>{edu.description}</p>
            <div className={styles.additionalInfo}>
              <div className={styles.courses}>
                <h4>Relevant Courses</h4>
                <ul>
                  {edu.courses.map((course, i) => (
                    <li key={i}>{course}</li>
                  ))}
                </ul>
              </div>
              <div className={styles.achievements}>
                <h4>Achievements</h4>
                <ul>
                  {edu.achievements.map((achievement, i) => (
                    <li key={i}>{achievement}</li>
                  ))}
                </ul>
              </div>
            </div>
          </div>
        </div>
      ))}
    </section>
  );
}

export default Education;