import Image from 'next/image';
import { DetailedHTMLProps, FC, HTMLAttributes } from 'react';

// ====================================================
interface FigureImageProps extends DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> {
  src: string;
  width: number;
  height: number;
  className?: string;
  classNameImage?: string;
  alt?: string;
}
// ====================================================

const FigureImage: FC<FigureImageProps> = (props) => {
  const { className, classNameImage, alt, src, width, height, ...others } = props;

  return (
    <figure className={className} {...others}>
      <Image width={width} height={height} src={src} alt={alt || "demo"} style={{ width: '100%', height: 'auto' }} className={classNameImage} />
    </figure>
  );
};

export default FigureImage;