import React, { useContext } from 'react';
import './counter.css';
import { CounterContext } from 'app/context/CounterContext';

const Counter = () => {
  const [count, setCount] = useContext(CounterContext);

  return (
    <>
      <div className="counter">
        <div className="global-state">
          <span style={{ fontWeight: 600, marginBottom: '10px' }}>
            Global State
          </span>
          <div className="buttons">
            <button
              disabled={count === 0 ? 'disable' : ''}
              onClick={() => setCount(count - 1)}
            >
              -
            </button>
            <button
              disabled={count < 10 ? 'disable' : ''}
              onClick={() => setCount(count - 10)}
            >
              - 10
            </button>
            <div>
              <h1 style={{ opacity: count === 0 ? '0.6' : '1' }}>{count}</h1>
            </div>
            <button onClick={() => setCount(count + 10)}>+ 10</button>
            <button onClick={() => setCount(count + 1)}>+</button>
          </div>
        </div>
      </div>
    </>
  );
};

export default Counter;