App calculatrice scientifique

import React, { useState } from 'react';

export default function App() {
  const [input, setInput] = useState('');
  const [result, setResult] = useState('');
  const [theme, setTheme] = useState('light');

  const handleClick = (value) => {
    if (value === '=') {
      try {
        setResult(eval(input).toString());
      } catch (error) {
        setResult('Error');
      }
    } else if (value === 'C') {
      setInput('');
      setResult('');
    } else {
      setInput(input + value);
    }
  };

  const buttons = [
    '7', '8', '9', '/',
    '4', '5', '6', '*',
    '1', '2', '3', '-',
    '0', '.', '=', '+',
    'C', '(', ')', '%'
  ];

  return (
    <div className={`min-h-screen flex flex-col items-center justify-center ${theme === 'light' ? 'bg-gray-100' : 'bg-gray-800'}`}>
      <div className={`p-6 rounded-lg shadow-lg ${theme === 'light' ? 'bg-white' : 'bg-gray-700'}`}>
        <div className={`mb-4 p-3 rounded ${theme === 'light' ? 'bg-gray-200' : 'bg-gray-600'}`}>
          <input
            type="text"
            value={input}
            readOnly
            className={`w-full text-right text-2xl ${theme === 'light' ? 'text-gray-800' : 'text-white'} bg-transparent`}
          />
          <input
            type="text"
            value={result}
            readOnly
            className={`w-full text-right text-xl ${theme === 'light' ? 'text-gray-600' : 'text-gray-300'} bg-transparent`}
          />
        </div>
        <div className="grid grid-cols-4 gap-2">
          {buttons.map((button, index) => (
            <button
              key={index}
              onClick={() => handleClick(button)}
              className={`p-3 rounded ${theme === 'light' ? 'bg-gray-200 hover:bg-gray-300' : 'bg-gray-600 hover:bg-gray-500'} text-xl ${theme === 'light' ? 'text-gray-800' : 'text-white'}`}
            >
              {button}
            </button>
          ))}
        </div>
        <div className="mt-4 flex justify-center">
          <button
            onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
            className={`p-2 rounded ${theme === 'light' ? 'bg-gray-800 text-white' : 'bg-white text-gray-800'}`}
          >
            {theme === 'light' ? 'Dark Mode' : 'Light Mode'}
          </button>
        </div>
      </div>
      <footer className={`mt-8 text-sm ${theme === 'light' ? 'text-gray-600' : 'text-gray-300'}`}>
        &copy; 2025 - Scientific Calculator
      </footer>
    </div>
  );
}