/* eslint-disable no-console */
/* eslint-disable react/jsx-key */
import { Typography } from '@mui/material'
import ActionButton from '../../ActionButton'
import { DialogButton } from '../../ModalButtons'
import NoDataSection from '../NoDataSection'
import EducationCard from './EducationCard'
import { EducationForm } from './EducationForm'
import { StyledBoxCard, StyledBoxContainer } from './Styles'

const Education = ({ educations }) => {
  const isEducation = educations && educations?.length > 0
  return isEducation ? (
    <>
      <StyledBoxContainer>
        <Typography variant="h3">Education</Typography>
        <DialogButton
          anchor={({ open }) => (
            <ActionButton onClick={open} variant="text">
              +Add Education
            </ActionButton>
          )}
          content={({ close }) => (
            <EducationForm data={null} hideDialog={close} />
          )}
          title="Add Education"
        />
      </StyledBoxContainer>
      <StyledBoxCard>
        {educations.map((data) => (
          <EducationCard data={data} />
        ))}
      </StyledBoxCard>
    </>
  ) : (
    <NoDataSection
      title="Education"
      subtitle="Add your Education"
      addButtonTitle="Add Education"
      addButtonContent={({ close }) => (
        <EducationForm data={null} hideDialog={close} />
      )}
    />
  )
}

export default Education
