import React from 'react';

/**
 * Renders the Excel icon
 * @param {React.SVGProps<SVGSVGElement>} props - The props for the Excel component
 * @returns {JSX.Element} - The Excel component
 * @example
 * <Excel />
 * @example
 * <Excel height={24} width={24} />
 * @example
 * <Excel className="custom-class" />
 */
export default function Excel({ isDecorative, ...props }: { isDecorative: boolean } & React.SVGProps<SVGSVGElement>) {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
      <path
        d="M14.1716 2.5H6C5.17157 2.5 4.5 3.17157 4.5 4V20C4.5 20.8284 5.17157 21.5 6 21.5H18C18.8284 21.5 19.5 20.8284 19.5 20V7.82843C19.5 7.16539 19.2366 6.5295 18.7678 6.06066L15.9393 3.23223C15.4705 2.76339 14.8346 2.5 14.1716 2.5Z"
        fill="#E7E7E7"
        stroke="#BCBCBC"
      />
      <path d="M14.5 3V6.5C14.5 7.05228 14.9477 7.5 15.5 7.5H19" stroke="#BCBCBC" />
      <rect y="8" width="12" height="12" rx="2" fill="#4FAD6F" />
      <path d="M3.5 11.5L8.5 16.5" stroke="white" strokeLinecap="round" />
      <path d="M8.5 11.5L3.5 16.5" stroke="white" strokeLinecap="round" />
      {!isDecorative && <title>excel doc icon</title>}
    </svg>
  );
}