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

const Experience = ({ experiences }) => {
  const isExperience = experiences && experiences.length > 0

  return isExperience ? (
    <>
      <StyledBoxContainer>
        <Typography variant="h3">Experience</Typography>
        <DialogButton
          anchor={({ open }) => (
            <ActionButton onClick={open} variant="text">
              +Add Experience
            </ActionButton>
          )}
          content={({ close }) => (
            <ExperienceForm data={null} hideDialog={close} />
          )}
          title="Add Experience"
        />
      </StyledBoxContainer>
      <StyledBoxCard>
        {experiences.map((data) => (
          <ExperienceCard data={data} />
        ))}
      </StyledBoxCard>
    </>
  ) : (
    <NoDataSection
      title="Experience"
      subtitle="Add Experience"
      addButtonTitle="Add Experience"
      addButtonContent={({ close }) => (
        <ExperienceForm data={null} hideDialog={close} />
      )}
    />
  )
}

export default Experience
