import React from 'react';
import { InputGroup } from '@orchard/frontend-react-components';
import NumberInput from '../number-input/number-input';

const CLASS_NAME = 'PercentageInput';

type Props = Omit<
React.ComponentProps<typeof NumberInput>,
'forceDecimalPlaces' | 'placeholder'
>;

const PercentageInput: React.FC<Props> = (props) => (
    <InputGroup>
        <NumberInput { ...props } forceDecimalPlaces placeholder={ 0 } />
        <InputGroup.Append>
            <InputGroup.Text className={ `${CLASS_NAME}-append-text` }>
                %
            </InputGroup.Text>
        </InputGroup.Append>
    </InputGroup>
);

export default PercentageInput;