{"size": 1190, "ext": "js", "max_stars_repo_path": "src/components/Image/Image.js", "max_stars_repo_name": "alice-ang/stuterizander", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/Image/Image.js", "max_issues_repo_name": "alice-ang/stuterizander", "max_issues_repo_issues_event_min_datetime": "2022-01-24T23:19:01.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-07T20:27:54.000Z", "max_forks_repo_path": "src/components/Image/Image.js", "max_forks_repo_name": "alice-ang/stuterizander", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 21, "max_forks_count": null, "avg_line_length": 23.3333333333, "max_line_length": 97, "alphanum_fraction": 0.5756302521}
import styled from 'styled-components';
import { Breakpoints } from 'styles';

const ImageWrapper = styled.figure(({ isFeatured }) => ({
  margin: isFeatured ? 'auto' : 0,
  width: isFeatured ? '100%' : 'fit-content',
  height: 'fit-content',
  p: {
    '&:first-child': {
      marginTop: 0,
    },

    '&:last-child': {
      marginTop: 0,
    },
  },
  img: {
    maxHeight: isFeatured ? 300 : undefined,
    height: '100%',
    objectFit: isFeatured ? 'contain' : 'cover',
    objectPosition: '50% 50%',
    [Breakpoints.Medium]: {
      maxHeight: isFeatured ? 500 : undefined,
    },
  },
  figcaption: {
    color: 'grey',
    textAlign: 'center',
    fontStyle: 'italic',
  },
}));

const Image = ({ children, src, alt, caption, srcSet, dangerouslySetInnerHTML, isFeatured }) => {
  return (
    <ImageWrapper isFeatured={isFeatured}>
      <img src={src} alt={alt || ''} srcSet={srcSet} />

      {children && <figcaption>{caption ?? children}</figcaption>}
      {dangerouslySetInnerHTML && (
        <figcaption
          dangerouslySetInnerHTML={{
            __html: dangerouslySetInnerHTML,
          }}
        />
      )}
    </ImageWrapper>
  );
};

export default Image;
