import React from 'react';

/**
 * Renders the Audio icon
 * @param {React.SVGProps<SVGSVGElement>} props - The props for the Audio component
 * @returns {JSX.Element} - The Audio component
 * @example
 * <Audio />
 * @example
 * <Audio height={24} width={24} />
 * @example
 * <Audio className="custom-class" />
 */
export default function Audio({ 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}>
      <rect fill="#cce9ed" height="19" rx="1.5" stroke="#73c0cb" width="19" x="2.5" y="2.5" />
      <path
        d="m9.5 7.4798c0-.23683.16616-.44118.39802-.48949l5.99998-1.25c.3105-.06468.602.17234.602.48949v1.2904c0 .23683-.1662.44118-.398.48949l-6 1.25c-.31051.06468-.602-.17234-.602-.48949z"
        fill="#73c0cb"
        stroke="#057e91"
      />
      <path d="m9 8c0-.55228.44772-1 1-1v9.5c0 .2761-.22386.5-.5.5s-.5-.2239-.5-.5z" fill="#057e91" />
      <circle cx="7.5" cy="16.5" fill="#73c0cb" r="2" stroke="#057e91" />
      <path d="m16 7 1 .32v7.18c0 .2761-.2239.5-.5.5s-.5-.2239-.5-.5z" fill="#057e91" />
      <circle cx="14.5" cy="14.5" fill="#73c0cb" r="2" stroke="#057e91" />
      {!isDecorative && <title>audio file icon</title>}
    </svg>
  );
}