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
  fill?: boolean
}

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