import React from "react"
import {
    StaticImage,
    IGatsbyImageData,
    GatsbyImage,
    getImage,
} from "gatsby-plugin-image"

export interface Iimage {
    image?: string | IGatsbyImageData
    className?: string
    objectPosition?: string
}

const Image = (props: Iimage) => {
    const { image, className = "", objectPosition = "50% 50%" } = props

    const imageClassname = ` ${className}`

    const imageNoAvailable = (
        <StaticImage
            src="../../images/no-image-available.jpg"
            alt="no-image-available"
            className={imageClassname}
        />
    )

    if (!image || typeof image == "undefined" || image == "mock") {
        return imageNoAvailable
    }

    if (typeof image == "string") {
        return <img src={image} alt={image} className={imageClassname} />
    }

    const img = getImage(image)
    if (typeof img == "undefined") {
        // SVG image
        if (image.publicURL) {
            return (
                <img
                    src={image.publicURL}
                    alt={image.name}
                    className={imageClassname}
                />
            )
        }

        return imageNoAvailable
    }

    // PNG image
    return (
        <GatsbyImage image={img} alt={image.name} className={imageClassname} objectPosition={objectPosition} />
    )
}

export default Image