import { Box } from '@mui/material'
const brokenImage = require('./broken-image.png')

interface ImageProps {
  src: string
  alt: string
  height: string | number
  width: string | number
  fit?: 'cover' | 'contain' | 'fill'
  radius?: string | number
  defaultImage?: any
}

export default function Image({
  src,
  alt,
  height,
  width,
  fit = 'contain',
  radius = '10px',
  defaultImage = null,
}: ImageProps) {
  return (
    <Box
      sx={{
        height: height,
        width: width,
        '& > img': {
          borderRadius: radius,
          width: '100%',
          height: '100%',
          objectFit: fit,
        },
      }}
    >
      <img
        src={src || defaultImage}
        alt={alt}
        onError={(e: any) => {
          e.target.src = defaultImage ? defaultImage : brokenImage
        }}
      />
    </Box>
  )
}
