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,
  ...props
}) => {
  return (
    <div {...props}>
      <Row align="middle" justify="center">
        <Col>
          <ImageUpload
            className="product-editor__cover"
            photo={photo}
            onUploadSuccess={onUploadSuccess}
            onRemove={onRemove}
            dropAspect={369 / 369}
          />
        </Col>
        <Col span={24}>
          <Text className="d--block text__align--center" preset="semibold18">
            Album/Track Artwork
          </Text>
        </Col>
        <Col span={24}>
          <Text
            className="d--block text__align--center text--grey4"
            preset="regular14"
          >
            Use a size that’s at least 369 x 369 pixels and 6MB or less
          </Text>
        </Col>
      </Row>
    </div>
  );
};

export default CoverUpload;
