const GaugeNeedle = ({
	value,
	min = 0,
	max = 100,
	stroke = 'black'
}: {
	value: number;
	min: number;
	max: number;
	stroke: string;
}) => {
	let adjustedValue = +value > max ? max : +value;
	adjustedValue = +adjustedValue < min ? min : +adjustedValue;
	// convert to percents
	const v = ((adjustedValue - min) / (max - min)) * 100;
	// Convert to -90 to +90 degrees
	// const angle = (v / (max - min)) * 180 - 90; // orig formula
	const angle = (v / 100) * 180 - 90;

	return (
		<svg
			width="40"
			height="100"
			viewBox="-5 -15 50 110"
			xmlns="http://www.w3.org/2000/svg"
			style={{
				position: 'absolute',
				width: '120px',
				height: '100px',
				bottom: '0',
				left: 'calc(50% - 60px)'
			}}
		>
			<g transform={`translate(20, 90) rotate(${angle})`}>
				<polygon points="0,-80 -4,0 4,0" fill={stroke} />
				<circle cx="0" cy="0" r="5" fill={stroke} />
			</g>
		</svg>
	);
};

export default GaugeNeedle;