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 span={24}>
          <ImageUpload
            className="on-demand-editor__cover"
            photo={photo}
            onUploadSuccess={onUploadSuccess}
            onRemove={onRemove}
            dropAspect={600 / 250}
          />
        </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 600 x 250 pixels and 6MB or less
          </Text>
        </Col>
      </Row>
    </React.Fragment>
  );
};

export default CoverUpload;
