import { Col, Row } from "antd/lib/grid";
import ImageUpload from "components/ImageUpload";
import { Text } from "components/Typography";
import React from "react";
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="product-editor__cover m__b--20"
            photo={photo}
            onUploadSuccess={onUploadSuccess}
            onRemove={onRemove}
            dropAspect={369 / 369}
          />
        </Col>
        <Col className="m__b--4" span={24}>
          <Text className="d--block text__align--center" preset="semibold18">
            Thumbnail Photo
          </Text>
        </Col>
        <Col span={24}>
          <Text
            className="d--block text__align--center text--grey4"
            preset="regular14"
          >
            {/* //TODO */}
            Use a size that’s at least 369 x 369 pixels and 6MB or less
          </Text>
        </Col>
      </Row>
    </React.Fragment>
  );
};

export default CoverUpload;
