import { useState } from 'react'

function Counter({storageName}) {

    let startValue = parseInt(localStorage.getItem(storageName)) || 0;
    localStorage.setItem(storageName, startValue);
    const [count, setCount] = useState(startValue);

    return (
        <>
            <button onClick={() => {
                localStorage.setItem(storageName, count + 1);
                setCount(count + 1);
            }}>
                Count: {count}
            </button>
            <CounterReset storageName=storageName />
        </>
    )
}

function CounterReset({storageName = 'default-counter'}) {
    return (
        <button onClick={() => localStorage.setItem(storageName, 0)}>
            Reset Counter
        </button>
    )
}

export default Counter