import * as React from "react"
import * as styles from "./index.module.scss"

interface IProps {
  className?: string
  imgInfo: imgMedia
  scale?: number[]
}

const ListImg: React.FC<IProps> = ({ className, imgInfo, scale = [16, 9] }) => {
  if (!imgInfo?.media?.url) return null

  const requireScale = scale[0] / scale[1]
  const { width = 1, height = 1 } = imgInfo.media
  const imgScale = width / height

  let imgClassName = ""
  if (imgScale == requireScale) {
    imgClassName = "widthEqualHeight"
  } else if (imgScale > requireScale) {
    imgClassName = "widthBiggerThanHeight"
  } else {
    imgClassName = "widthSmallerThanHeight"
  }

  return (
    <div
      style={{
        paddingBottom: `calc(${scale[1] ? scale[1] : 9} / ${
          scale[0] ? scale[0] : 16
        } * 100%)`,
      }}
      className={`${styles.imgContent} ${className ? className : ""}`}
    >
      <img
        alt={imgInfo.alt}
        src={imgInfo.media?.url}
        className={styles[imgClassName]}
      />
    </div>
  )
}

export default ListImg