const ENTRIES = [
  { period: '2018', title: 'Bac techno STI2D SIN' },
  { period: '2019-2020', title: 'CAP Mecanique Auto' },
  { period: '2020-2021', title: 'CAP Plomberie Chauffagerie' },
  {
    period: '2022-2025',
    title: 'Administrateur système\nDéveloppeur application',
    description: 'OpenMotion',
  },
]

export function HomeEducationTimeline() {
  return (
    <div className="home-timeline">
      <h2 className="home-timeline__heading">Parcours</h2>
      <ol className="home-timeline__list">
        {ENTRIES.map((entry) => (
          <li key={`${entry.period}-${entry.title}`} className="home-timeline__item">
            <span className="home-timeline__marker" aria-hidden />
            <div className="home-timeline__body">
              <span className="home-timeline__period">{entry.period}</span>
              <p className="home-timeline__title">{entry.title}</p>
              {entry.description ? (
                <p className="home-timeline__desc">{entry.description}</p>
              ) : null}
            </div>
          </li>
        ))}
      </ol>
    </div>
  )
}
