import React, { useState } from 'react'
import Image, { ImageProps } from 'next/image'
import '../tailwind.css'

export interface NextImageProps {
  /** URL for the image */
  source: ImageProps['src']
  /** Alt text for the image */
  alt: string
  /** The width of the image */
  width?: ImageProps['width']
  /** The height of the image */
  height?: ImageProps['height']
  // The layout behavior of the image as the viewport changes size.
  layout?: ImageProps['layout']
  //** Rounded image */
  rounded?: boolean
}

export const NextImage = ({
  source,
  width,
  height,
  alt,
  rounded,
  ...rest
}: NextImageProps) => {
  const fallBackImage =
    '<svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path> </svg>'
  const [imgSrc, setImgSrc] = useState(source)
  return (
    <Image
      className={rounded ? 'rounded-full' : ''}
      src={imgSrc}
      width={width}
      height={height}
      alt={alt}
      layout="responsive"
      onError={() => setImgSrc(fallBackImage)}
      {...rest}
    />
  )
}
