import * as React from 'react';
import { FC } from 'react';
import { IMedia } from '../../../../../../types';
import { style } from 'typestyle';

interface ImageDisplayProps {
  post: IMedia;
  objectFit?: 'contain' | 'cover';
}

const ImageDisplay: FC<ImageDisplayProps> = ({ post, objectFit = 'contain' }) => {
  return (
    <img
      src={post.image}
      alt={post.caption || 'Post image'}
      className={styles.media}
      style={{ objectFit }}
    />
  );
};

export default ImageDisplay;

const styles = {
  media: style({
    width: '100%',
    height: '100%',
  }),
};
