import Image, {ImageProps} from "next/image"
import {ImageViewProps} from "../../props"
import styles from "./styles.module.sass"

export const ImageView = (props: ImageViewProps) => {
  const {imgWidth, imgHeight, imgSize, alt, src, placeHolder = "", wrapperClass} = props

  const imageSource = src || placeHolder || ""

  const imgProps: ImageProps = {
    width: imgSize || imgWidth,
    height: imgSize || imgHeight,
    src: imageSource,
    alt: alt || "",
  }

  const renderImage = () => (
    <Image {...props} {...imgProps} alt={alt || ""} fill={!imgSize && !imgWidth && !imgHeight} />
  )

  return src || placeHolder ? (
    wrapperClass ? (
      <section {...props} className={`${styles.image_container} flex-center ${wrapperClass}`}>
        {renderImage()}
      </section>
    ) : (
      renderImage()
    )
  ) : null
}