/* eslint-disable react/destructuring-assignment */
import type { FormEvent } from 'react';
import type React from 'react';

const ArrowSvg: React.FC<{
	svgClass: string;
	clickHandler: (event: FormEvent) => void;
}> = (props: { svgClass: string; clickHandler: (event: FormEvent) => void }): JSX.Element => {
	function clickHandler(event: FormEvent): void {
		props.clickHandler(event);
	}

	return (
		<svg
			className={props.svgClass}
			fill="none"
			height="9"
			onClick={clickHandler}
			viewBox="0 0 14 9"
			width="14"
			xmlns="http://www.w3.org/2000/svg"
		>
			<path d="M7 9L0.937822 0.75L13.0622 0.750001L7 9Z" fill="var(--primary-color)" />
		</svg>
	);
};

export default ArrowSvg;