import React, { useState } from 'react'
import "./Increment_decrement_btn_holder.css"
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faMinus, faPlus } from '@fortawesome/free-solid-svg-icons'

function Increment_decrement_btn_holder({quantity,setQuantity}) {
    

    const increment = () => {
        setQuantity(prev => prev + 1);
    };

    const decrement = () => {
        setQuantity(prev => (prev > 1 ? prev - 1 : 1));
    };


    


    return (
        <>
            <section className='Increment_decrement_btn_holder'>
                <div className="sign_holder" onClick={decrement}>
                    <FontAwesomeIcon className="sign_icon" icon={faMinus} />
                </div>
                <div className="number_holder">
                    <span>{String(quantity).padStart(2, "0")}</span>
                </div>
                <div className="sign_holder" onClick={increment}>
                    <FontAwesomeIcon className="sign_icon" icon={faPlus} />
                </div>
            </section>

        </>
    )
}

export default Increment_decrement_btn_holder
