import { Box, Card, Typography } from '@mui/material'
import moment from 'moment'
import { EditButton } from '../../IconButtons'
import { EducationIcon } from '../../IconButtons/Icons'
import { DialogButton } from '../../ModalButtons'
import { EducationForm } from './EducationForm'
import { AvatarStyled, StyledBox } from './Styles'

const EducationCard = ({ data }) => {
  return (
    <div>
      <Card
        sx={{
          padding: '20px ',
        }}
      >
        <StyledBox>
          <Box
            sx={{
              display: 'flex',
            }}
          >
            <AvatarStyled>
              <EducationIcon />
            </AvatarStyled>

            <Box sx={{ marginTop: '8px', marginRight: '5px' }}>
              <Typography variant="body2">{data?.institution}</Typography>
              <Typography variant="subtitle2">
                {moment(data?.startDate).format('DD MMMM, YYYY')} -
                {moment(data?.endDate).format('DD MMMM, YYYY')}
              </Typography>
            </Box>
          </Box>
          <Box
            sx={{
              display: 'flex',
            }}
          >
            <DialogButton
              title={'Edit Education'}
              anchor={({ open }) => <EditButton onClick={open} />}
              content={({ close }) => (
                <EducationForm data={data} hideDialog={close} />
              )}
            />
          </Box>
        </StyledBox>
        <Box
          sx={{
            paddingTop: '10px',
          }}
        >
          <Typography variant="h5">{data?.name}</Typography>
          <Typography variant="subtitle2">{data?.description}</Typography>
        </Box>
      </Card>
    </div>
  )
}

export default EducationCard
