import Image from 'next/image'

import ExpertProfileIcon1 from '@/assets/expertProfileIcon1.svg'

import { Experience } from '@/types/expertTypes'
import moment from 'moment-timezone'

const Experiences = ({ experiences }: { experiences: Experience[] }) => {
  return (
    <>
      <section className="hidden md:flex md:w-full items-start justify-center md:justify-start m-auto flex-shrink-0 rounded-[20px] px-6 bg-[#DFECF4] md:mt-0  mt-12 py-6">
        <div className="flex p-4 md:p-[32px] flex-col items-start bg-white w-full rounded-xl ">
          <div className="flex jusitfy-start">
            <p className="font-inter text-base font-bold capitalize leading-8">
              Professional Experience{' '}
            </p>
          </div>
          {experiences?.map((experience: Experience) => (
            <div
              className="flex flex-col w-full md:flex-row gap-4 mt-2 md:mt-5  pt-6 border-t border-t-slate-300"
              key={experience.companyName}
            >
              <div className="flex justify-start items-start gap-5">
                <Image src={ExpertProfileIcon1} alt="" />
                <div className="flex flex-col">
                  <h1 className="font-bold text-xl">
                    {' '}
                    {experience?.companyName}{' '}
                  </h1>
                  <p>{experience?.role}</p>
                  <p>{moment(experience?.startDate).format('YYYY-MM-DD') + ' - ' + (experience?.endDate ? moment(experience?.endDate).format('YYYY-MM-DD') : "Present")}</p>
                  <p> {experience?.duration} </p>
                  <div className="md:py-3 w-full items-start md:items-start">
                    {experience?.description}
                  </div>
                </div>
              </div>

            </div>
          )
          )}
        </div>
      </section>
    </>
  )
}

export default Experiences