import React from 'react';
import PropTypes from 'prop-types';
import { withTheme } from '../styles';

import Box from '../Box';

const CardMedia = (props) => {
  const { image, alt, title, children } = props;

  return (
    <Box
      alt={alt}
      className="card-media"
      backgroundImage={`url('${image}')`}
      backgroundPosition="center"
      backgroundRepeat="no-repeat"
      backgroundSize="cover"
      minHeight={50}
      p="tiny"
      title={title}
      width={1}
      {...props}
    >
      <Box>{children}</Box>
    </Box>
  );
};

CardMedia.propTypes = {
  alt: PropTypes.string.isRequired,
  image: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
  children: PropTypes.node,
};

CardMedia.defaultProps = {
  children: '',
};

CardMedia.displayName = 'CardMedia';

export default withTheme(CardMedia);