import React from "react";
import styles from "./InfoSection.module.css";

function InfoSection({ title, data, isEducation }) {
	const sortedData = [...data].sort((a, b) => b.id - a.id);

	return (
		<section className={styles.infoSection}>
			<h2 className={styles.sectionTitle}>{title}</h2>
			{sortedData.map((item) => (
				<div key={item.id} className={styles.entry}>
					<div className={styles.headerSection}>
						<div className={styles.logoContainer}>
							<img src={item.logo} alt={`${item.organization} logo`} className={styles.logo} />
						</div>
						<div className={styles.titleSection}>
							<h3 className={styles.title}>{item.title}</h3>
							<p className={styles.organizationInfo}>
								{item.organization} | {item.location} | {item.duration}
							</p>
						</div>
					</div>
					<div className={styles.content}>
						<p className={styles.description}>{item.description}</p>
						<div className={styles.additionalInfo}>
							{isEducation && item.achievements && item.achievements.length > 0 && (
								<div className={styles.skillSection}>
									<h4>Achievements:</h4>
									<ul>
										{item.achievements.map((achievement, i) => (
											<li key={i}>{achievement}</li>
										))}
									</ul>
								</div>
							)}
							<div className={styles.skillSection}>
								<h4>{item.skillsTitle || "Skills Gained"}:</h4>
								<ul>
									{item.skills.map((skill, i) => (
										<li key={i}>{skill}</li>
									))}
								</ul>
							</div>
							<div className={styles.skillSection}>
								<h4>{item.techStackTitle || "Tech Stack"}:</h4>
								<ul>
									{item.techStack.map((tech, i) => (
										<li key={i}>{tech}</li>
									))}
								</ul>
							</div>
						</div>
					</div>
				</div>
			))}
		</section>
	);
}

export default InfoSection;
