import React, { useState } from 'react';
import './App.css';

function App() {
  const [count, setCount] = useState(0);
  const [message, setMessage] = useState('');

  const handleIncrement = () => {
    setCount(count + 1);
    setMessage(`You clicked ${count + 1} times!`);
  };

  const handleDecrement = () => {
    setCount(count - 1);
    setMessage(`You clicked ${count - 1} times!`);
  };

  const resetCounter = () => {
    setCount(0);
    setMessage('Counter reset!');
  };

  return (
    <div className="App">
      <header className="App-header">
        <h1>Custom React Counter App</h1>
        <div className="counter-container">
          <div className="counter-display">
            <h2>Count: {count}</h2>
          </div>
          <div className="button-group">
            <button 
              className="counter-btn increment-btn" 
              onClick={handleIncrement}
            >
              + Increment
            </button>
            <button 
              className="counter-btn decrement-btn" 
              onClick={handleDecrement}
            >
              - Decrement
            </button>
            <button 
              className="counter-btn reset-btn" 
              onClick={resetCounter}
            >
              Reset
            </button>
          </div>
          {message && (
            <div className="message">
              <p>{message}</p>
            </div>
          )}
        </div>
        <footer className="app-footer">
          <p>Built with React 18 • Hugging Face Spaces</p>
        </footer>
      </header>
    </div>
  );
}

export default App;