import React from 'react'
import Image from 'next/image'
import Accordionn from '@/components/ui/Accordionn'

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

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

const Experiences = ({ experiences }: any) => {
  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?.experiences?.map(
            (experience: Experience, index: number) => (
              <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={index}
              >
                <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>
                </div>

                <div className="flex-1 md:pl-12 w-full items-center md:items-start">
                  {experience?.description}
                </div>
              </div>
            )
          )}
        </div>
      </section>
    </>
  )
}

export default Experiences