import React from 'react';

/**
 * Renders the Image icon
 * @param {React.SVGProps<SVGSVGElement>} props - The props for the Image component
 * @returns {JSX.Element} - The Image component
 * @example
 * <Image />
 * @example
 * <Image height={24} width={24} />
 * @example
 * <Image className="custom-class" />
 */
export default function Image({ isDecorative, ...props }: { isDecorative: boolean } & React.SVGProps<SVGSVGElement>) {
  return (
    <svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" {...props}>
      <path
        d="m21 17.5h.5v-.5-13c0-.82843-.6716-1.5-1.5-1.5h-16c-.82843 0-1.5.67157-1.5 1.5v13 .5h.5z"
        fill="#cce2f6"
        stroke="#74b1e6"
      />
      <circle cx="15.5" cy="8.5" fill="#fbefd2" r="3" stroke="#f0c14f" />
      <path
        d="m21.3749 16.0025.1251.1418v.189 3.6667c0 .8284-.6716 1.5-1.5 1.5h-8.5-1.1506l.7851-.8412 6.2481-6.6944c.6044-.6476 1.6353-.6331 2.2214.031z"
        fill="#cee9d8"
        stroke="#79c292"
      />
      <path
        d="m2.62777 13.6262-.12777.1424v.1914 6.04c0 .8284.67157 1.5 1.5 1.5h13 1.0974l-.7201-.8281-9.25697-10.6455c-.59189-.68068-1.64634-.68877-2.2486-.0173z"
        fill="#79c292"
        stroke="#098934"
      />
      {!isDecorative && <title>image icon</title>}
    </svg>
  );
}