import React from 'react'
import { Text } from 'components/Typography'
import { Row, Col } from 'antd/lib/grid'
import ImageUpload from 'components/ImageUpload'
import { MediaUpload } from 'redux/Common/types'

interface Props {
  photo: MediaUpload
  onUploadSuccess: (file: MediaUpload) => void
  onRemove: (file: MediaUpload) => void
}

const CoverUpload: React.FC<Props> = ({ photo, onUploadSuccess, onRemove }) => {
  return (
    <React.Fragment>
      <Row align="middle" justify="center">
        <Col>
          <ImageUpload
            className="experience-live-class__cover"
            photo={photo}
            onUploadSuccess={onUploadSuccess}
            onRemove={onRemove}
            dropAspect={1128 / 1419}
          />
        </Col>
        <Col span={24}>
          <Text className="d--block text__align--center" preset="semibold18">
            Cover Photo
          </Text>
        </Col>
        <Col span={24}>
          <Text className="d--block text__align--center" preset="regular14">
            Use a size that’s at least 1128 x 1419 pixels and 6MB or less
          </Text>
        </Col>
      </Row>
    </React.Fragment>
  )
}

export default CoverUpload
