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

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

            <Box sx={{ marginTop: '8px', marginRight: '5px' }}>
              <Typography variant="body2">{data?.title}</Typography>
              <Typography variant="subtitle2">
                {moment(data?.fromDate).format('DD MMMM, YYYY')} -
                {data?.toDate
                  ? moment(data?.toDate).format('DD MMMM, YYYY')
                  : 'Present'}
              </Typography>
            </Box>
          </Box>
          <Box
            sx={{
              display: 'flex',
            }}
          >
            <DialogButton
              key={data?.id}
              title={'Edit Experience'}
              anchor={({ open }) => <EditButton onClick={open} />}
              content={({ close }) => (
                <ExperienceForm data={data} hideDialog={close} />
              )}
            />
          </Box>
        </StyledBox>
        <Box
          sx={{
            paddingTop: '10px',
          }}
        >
          <Typography variant="h5">{data?.organizationName}</Typography>
          <Typography variant="subtitle2">{data?.description}</Typography>
        </Box>
      </Card>
    </div>
  )
}

export default ExperienceCard
