import { useState } from 'react';

function Counter({storageName = 'default-counter'}) {

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

    return (
        <>
            <button onClick={() => {
                localStorage.setItem(storageName, (parseInt(localStorage.getItem(storageName)) || 0) + 1);
                setCount(localStorage.getItem(storageName));
            }}>
                Count: {count}
            </button>
            <ResetButton storageName={storageName} />
        </>
    );
}

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

export default Counter;
