Image.tsx

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

interface Props {
  image?: string | IGatsbyImageData;
  classname?: string;
}


const Image = (props: Props) => {
  const {
    image,
    classname = ""
  } = props;
  
  const imageClassname = `h-full w-full object-cover ${classname}`;

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

  if (! image || typeof image == 'undefined') {
    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;