import { cx } from 'class-variance-authority'
import { MaterialIcon } from '../Icons/MaterialIcon'

import styles from './imageFallback.module.css'

interface ImageFallbackProps extends React.HTMLAttributes<HTMLDivElement> {
  width?: string
  height?: string
}

export default function ImageFallback({
  width = '100%',
  height = '100%',
  className,
  ...props
}: ImageFallbackProps) {
  return (
    <div
      {...props}
      className={cx(styles.imageFallback, className)}
      style={{ width, height }}
    >
      <MaterialIcon
        icon="imagesmode"
        size={32}
        color="Icon/Interactive/Disabled"
      />
    </div>
  )
}