import React, { FC } from 'react';
import { GaugeProps } from 'types';
import { GaugeSVG } from './GaugeSVG';
import { useComponentLogic } from './hooks';
import * as S from './styles';

export const Gauge: FC<GaugeProps> = props => {
	const svgProps = useComponentLogic(props);
	return (
		<S.Gauge>
			<GaugeSVG {...svgProps} />
			{/* <S.GaugeMetric>{formatNumber(value)}</S.GaugeMetric>
			{!!label && <S.GaugeLabel>{label}</S.GaugeLabel>}
			{!!units && <S.GaugeLabel>{units}</S.GaugeLabel>} */}
		</S.Gauge>
	);
};

Gauge.defaultProps = {
	data: [
		{ color: '#FED57D', label: '0 - 33%' },
		{ color: '#883604', label: '33 - 67%' },
		{ color: '#FF8201', label: '67 - 100%' },
	],
	hideArrow: false,
	inverse: false,
	label: 'Gauge',
	max: 100,
	min: 0,
	segmentEnds: [33, 67],
	value: 100 / 3,
};

export default Gauge;