import { forwardRef } from "react";
import { cx, css } from "@emotion/css";
import PropTypes from 'prop-types';

const MediaImgStyles = (borderRadius, height, width) => css`
    border-radius: ${borderRadius || '16px'};
    width: ${width || '100px'};
    height: ${height || '100px'};
`

const MediaImg = forwardRef((props, ref) => {

    const {
        className,
        src,
        alt,
        borderRadius,
        width,
        height,
    ...otherProps} = props;

    return(
        <img 
            src={src}
            alt={alt}
            ref={ref}
            className={ cx(MediaImgStyles(borderRadius, width, height), className) }
            {...otherProps}
        />
    );
});

MediaImg.propTypes = {
    width: PropTypes.string,
    height: PropTypes.string,
    borderRadius: PropTypes.string,
    src: PropTypes.string,
    alt: PropTypes.string,
    className: PropTypes.string
}

export default MediaImg;