import React from 'react';

const localeOptions = {
    style:'currency',
    currency:'USD',
    currencyDisplay:'symbol',
    minimumFractionDigits: 0,
    maximumFractionDigits: 0,
}

export const SimpleCalculatorControls = props => {
    return (
        <div className="grid__container">
            <div className="grid__item">
                <span className="grid__item--header">{parseInt(props.deposit).toLocaleString('en-US', localeOptions)}</span>
                <input
                    type="range"
                    className="grid__item--range-slider"
                    id="deposit"
                    min="10000"
                    max="300000"
                    step="100"
                    value={props.deposit}
                    onChange={(event) =>
                        props.setDeposit(event.target.value)
                    } />
               <label className="grid__item--label" htmlFor="deposit">Deposit</label>
            </div>
            <div className="grid__item">
                <span className="grid__item--header">{props.interestRate}%</span>
                <input
                    type="range"
                    className="grid__item--range-slider"
                    id="interestRate"
                    min="0"
                    max="8"
                    step="1"
                    value={props.interestRate}
                    onChange={(event) =>
                        props.setInterestRate(event.target.value)
                    } />
               <label className="grid__item--label" htmlFor="interestRate">Interest Rate</label>
            </div>
            <div className="grid__item">
                <span className="grid__item--header">{props.duration} Years</span>
                <input
                    type="range"
                    className="grid__item--range-slider"
                    id="duration"
                    min="1"
                    max="60"
                    step="1"
                    value={props.duration}
                    onChange={(event) =>
                        props.setDuration(event.target.value)
                    } />
               <label className="grid__item--label" htmlFor="duration">Duration</label>
            </div>
        </div>
    );
}