import React from 'react';

/**
 * Renders the ArrowDown icon
 * @param {React.SVGProps<SVGSVGElement>} props - The props for the ArrowDown component
 * @returns {JSX.Element} - The ArrowDown component
 * @example
 * <ArrowDown />
 * @example
 * <ArrowDown height={24} width={24} />
 * @example
 * <ArrowDown className="custom-class" />
 */
export default function ArrowDown({
  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="M8.12508 8.99999L12.0051 12.88L15.8851 8.99999C16.2751 8.60999 16.9051 8.60999 17.2951 8.99999C17.6851 9.38999 17.6851 10.02 17.2951 10.41L12.7051 15C12.3151 15.39 11.6851 15.39 11.2951 15L6.70508 10.41C6.51783 10.2232 6.4126 9.96951 6.4126 9.70499C6.4126 9.44047 6.51783 9.18682 6.70508 8.99999C7.09508 8.61999 7.73508 8.60999 8.12508 8.99999Z"
        fill="#707070"
      />
      {!isDecorative && <title>arrow down icon</title>}
    </svg>
  );
}
