import React from 'react'
import Image from 'next/image'
import ExpertProfileIcon1 from '@/assets/expertProfileIcon1.svg'

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

const Expertises = ({ expertise }: 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 flex-1 w-full   bg-white  rounded-xl ">
          <div className=" flex jusitfy-start">
            <p className="font-inter text-base font-bold capitalize leading-8">
              Expertise
            </p>
          </div>

          {expertise?.expertises?.map((expert: any, index: number) => (
            <div
              className="flex flex-col md:flex-row gap-4 mt-2 md:mt-5 w-full  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"> {expert?.field} </h1>
                  <p>{moment(expert?.startDate).format('YYYY-MM-DD') + ' - ' + (expert?.endDate ? moment(expert?.endDate).format('YYYY-MM-DD') : "Present")}</p>{' '}
                </div>
              </div>
              <div className=" flex-1 md:pl-12 w-full items-center md:items-start  ">
                {expert?.description}
              </div>
            </div>
          ))}
        </div>
      </section>
    </>
  )
}

export default Expertises