import { Box, Card, Typography } from '@mui/material'
import moment from 'moment'
import { EditButton } from '../../IconButtons'
import Image from '../../Image/Image'
import { DialogButton } from '../../ModalButtons'
import { StyledAvatar, StyledBox, StyledTextContainer } from './Styles'
import { WorkshopForm } from './WorkshopForm'

const WorkshopCard = ({ data }) => {
  return (
    <div>
      <Card
        sx={{
          padding: '15px',
        }}
      >
        <StyledBox>
          <Box
            sx={{
              display: 'flex',
            }}
          >
            {data?.image?.url ? (
              <Image
                alt=""
                radius={'10px'}
                src={data?.image?.url}
                width={'100px'}
                height={'100px'}
                fit={'cover'}
              />
            ) : (
              <StyledAvatar>
                <Typography sx={{ color: 'blue', fontSize: '30px' }}>
                  {data?.title[0].toUpperCase()}
                </Typography>
              </StyledAvatar>
            )}
            <StyledTextContainer>
              <Typography variant="h5">{data?.title}</Typography>
              <Typography variant="subtitle2">{data?.stream}</Typography>
              <Typography variant="subtitle2">
                {moment(data?.fromDate).format('DD MMM YYYY')} -{' '}
                {moment(data?.toDate).format('DD MMM YYYY')}
              </Typography>
            </StyledTextContainer>
          </Box>
          <Box>
            <DialogButton
              key={data?.id}
              title={'Edit Workshop'}
              anchor={({ open }) => <EditButton onClick={open} />}
              content={({ close }) => (
                <WorkshopForm data={data} hideDialog={close} />
              )}
            />
          </Box>
        </StyledBox>
      </Card>
    </div>
  )
}

export default WorkshopCard
