import React, { FC } from 'react';
import { GaugeArrowProps } from 'types';

const arrowPath =
	'M 0.0138 -0.8816 C 0.0112 -0.8972 -0.0112 -0.8972 -0.0138 -0.8816 L -0.1473 -0.0801 C -0.1603 -0.0563 -0.1677 -0.0291 -0.1677 0 C -0.1677 0.0053 -0.1674 0.0106 -0.167 0.0158 C -0.1666 0.0205 -0.1659 0.0253 -0.1651 0.0299 C -0.1649 0.0303 -0.1649 0.0309 -0.1648 0.0313 C -0.1502 0.109 -0.0819 0.1677 0 0.1677 C 0.0819 0.1677 0.1502 0.109 0.1648 0.0313 L 0.1649 0.0307 L 0.1651 0.0299 C 0.1667 0.0203 0.1677 0.0102 0.1677 0 C 0.1677 -0.0291 0.1603 -0.0563 0.1473 -0.0801 L 0.0138 -0.8816 Z M 0 0.0559 C 0.0309 0.0559 0.0559 0.0309 0.0559 0 C 0.0559 -0.0309 0.0309 -0.0559 0 -0.0559 C -0.0309 -0.0559 -0.0559 -0.0309 -0.0559 0 C -0.0559 0.0309 -0.0309 0.0559 0 0.0559 Z';

export const Arrow: FC<GaugeArrowProps> = ({ hide, transform }) =>
	!hide ? (
		<path
			className="gauge-arrow"
			clipRule="evenodd"
			d={arrowPath}
			fillRule="evenodd"
			transform={transform}
		/>
	) : null;

Arrow.defaultProps = {
	hide: false,
	transform: 'rotate(0 -1 -1)',
};

export default Arrow;