import React from 'react'
import ExpertProfileIcon1 from '@/assets/expertProfileIcon1.svg'
import Image from 'next/image'
import { Education } from '@/types/expertTypes'
import moment from 'moment-timezone'

const Educations = ({ education }: any) => {
  return (
    <>
      <section className="hidden md:flex md:w-full  items-start justify-center m-auto flex-shrink-0 rounded-[20px] px-6 bg-[#DFECF4]  mt-12 md:mt-0 py-6   ">
        <div className=" flex min-w-full p-4 md:p-[32px] flex-col items-start    bg-white  rounded-xl ">
          <div className=" flex jusitfy-start">
            <p className="font-inter text-base font-bold capitalize leading-8">
              Education{' '}
            </p>
          </div>

          {education?.educations?.map((educ: Education, index: number) => (
            <div
              className="flex flex-col md:flex-row gap-4 mt-2 md:mt-5  pt-6 border-t border-t-slate-300  w-full  "
              key={index}
            >
              <div className="flex  justify-start items-start gap-5 flex-1">
                <Image src={ExpertProfileIcon1} alt="" />
                <div className="flex flex-col">
                  <h1 className="font-bold text-xl">{educ?.institutionName}</h1>
                  <p> {educ?.diplomaTitle}</p>
                  <p> {moment(educ?.startDate).format('YYYY-MM-DD') + ' - ' + (educ?.endDate ? moment(educ?.endDate).format('YYYY-MM-DD') : "Present")} </p>
                  <p> {educ?.duration} </p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>
    </>
  )
}

export default Educations