import React, { CSSProperties, useContext, useMemo } from "react"

import { ProductContext } from "../contexts/ProductContext"

import { ProductContextProps } from "../interfaces/Product"
import styles from '../styles/styles.module.css'
import noImage from '../assets/no-image.jpg'

export interface ImageProps {
  image?: string;
  className?: string;
  style?: CSSProperties;
}

const Image = ({ image, className, style } : ImageProps) => {
  const { product }: ProductContextProps = useContext(ProductContext)
  
  const src = useMemo(() => image ? image : !!product.image ? product.image : noImage, [image, product])

  return (
    <img
      className={`${styles.productImg} ${className ?? ''}`}
      style={style ?? {}}
      src={src}
      alt="coffee-mug"
    />
  )
}

export default Image