import React from "react";
import workHistory from "../components/exData.jsx";

function Experience() {
  return (
    <section className="my-28 px-5" id="experience">
      <header className="pt-10 text-2xl font-bold">
        <h2>Experience</h2>
      </header>
      <div className="main-cont">
        <section id="cd-timeline" className="cd-container">
          {workHistory &&
            workHistory.map((work) => (
              <div className="cd-timeline-block" key={work.id}>
                <div className="cd-timeline-img" />
                <div className="cd-timeline-content">
                  <h1 className="pl-3 pt-2 text-2xl font-bold uppercase">
                    <a href={work.link} target="_blank" rel="noreferrer">
                      {work.companyName}
                    </a>
                  </h1>
                  <h4 className="pl-3 pt-2 text-base font-bold uppercase">
                    {work.role}
                  </h4>
                  <div className="timeline-content-info">
                    <h5 className="text-sm">{work.duration}</h5>
                  </div>
                  <div className="pl-2">
                    {work.workDes &&
                      work.workDes.map((x) => (
                        <h4 className="pt-2 text-base" key={x}>
                          <span className="text-xl">- </span>
                          {x}
                        </h4>
                      ))}
                  </div>
                </div>
              </div>
            ))}
        </section>
      </div>
    </section>
  );
}

export default Experience;
