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

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

const Image = (props: Iimage) => {
    const { image, className = "" } = 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") {
        return imageNoAvailable
    }

    return (
        <GatsbyImage
            image={img}
            alt="gatsby-image"
            className={imageClassname}
        />
    )
}

export default Image