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

function SingleExperience({ experience, whichSide }) {
    return (
        <div className={`experience-card ${whichSide ? 'right' : 'left'}`}>
            <div className="experience-card-header">
                <div className="experience-primary-info">
                    <h3 className="experience-role">{experience.role}</h3>
                    <p className="experience-company-location">
                        {experience.company} • {experience.location}
                    </p>
                </div>
                <p className="experience-duration">{experience.duration}</p>
            </div>
            <ul className="experience-tasks">
                {experience.tasks.map((task, index) => (
                    <li key={index}>{task}</li>
                ))}
            </ul>
        </div>
    );
}
export default SingleExperience;