import React, { FC } from 'react';
import { GaugeSVGProps } from 'types';
import Arrow from './Arrow';
import Base from './Base';
import { useComponentLogic } from './hooks';
import Segment from './Segment';
import * as S from './styles';

export const GaugeSVG: FC<GaugeSVGProps> = props => {
	const { colors, hideArrow } = props;
	const { arcs, arrowTransform } = useComponentLogic(props);
	return (
		<S.GaugeSVG viewBox="-1, -1, 2, 1">
			<Base />
			{arcs.map((d, i) => (
				<Segment d={d} fill={colors[i]} key={i} />
			))}
			<Arrow hide={hideArrow} transform={arrowTransform} />
		</S.GaugeSVG>
	);
};

export default GaugeSVG;