import '../styles/SingleExperience.css';

function SingleExperience({ experience }) {
    return (
        <div className="experience-card">
            <div className="experience-card-left">
                <h3 className="experience-company">{experience.company}</h3>
                <p className="experience-location">{experience.location}</p>
                <p className="experience-duration">{experience.duration}</p>
            </div>
            <div className="experience-card-right">
                <h3 className="experience-role">{experience.role}</h3>
                <ul className="experience-tasks">
                    {experience.tasks.map((task, index) => (
                        <li key={index}>{task}</li>
                    ))}
                </ul>
            </div>
        </div>
    );
}
export default SingleExperience;