تطبيق تعدين العملات الرقمية

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

const App = () => {
  const [stage, setStage] = useState(1);
  const [count, setCount] = useState(0);
  const [isMining, setIsMining] = useState(false);

  const stages = [
    { title: 'Muslim', target: 313, phrase: 'Astaghfirullah' },
    { title: 'Believers', target: 1000, phrase: 'Subbuhun Quddusun Rabbul Malaikati war-Ruh' },
    { title: 'Purified', target: 3000, phrase: 'La ilaha illa anta subhanaka inni kuntu minaz-zalimin' },
    { title: 'Pious', target: 6000, phrase: 'Allahumma Fatir as-samawati wal-ard, 'alim al-ghaybi wash-shahadah, anta tahkumu bayna 'ibadik fima kanu fihi yakhtalifun' },
    { title: 'Beneficent', target: 9000, phrase: 'La ilaha illa anta al-Ahad as-Samad' }
  ];

  useEffect(() => {
    if (isMining) {
      const interval = setInterval(() => {
        setCount(prevCount => prevCount + 1);
      }, 1000);
      return () => clearInterval(interval);
    }
  }, [isMining]);

  useEffect(() => {
    if (count >= stages[stage - 1].target) {
      setStage(prevStage => prevStage + 1);
      setCount(0);
    }
  }, [count, stage, stages]);

  const startMining = () => {
    setIsMining(true);
  };

  const stopMining = () => {
    setIsMining(false);
  };

  return (
    <div className="min-h-screen bg-gradient-to-b from-blue-900 to-purple-900 text-white flex flex-col items-center justify-center">
      <h1 className="text-4xl font-bold mb-8">Digital Currency Mining</h1>
      <div className="bg-white bg-opacity-10 p-8 rounded-lg shadow-lg text-center">
        <h2 className="text-2xl font-semibold mb-4">Stage: {stages[stage - 1].title}</h2>
        <p className="text-lg mb-4">Phrase: {stages[stage - 1].phrase}</p>
        <p className="text-lg mb-4">Count: {count}</p>
        <div className="flex space-x-4">
          <button onClick={startMining} className="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded">Start Mining</button>
          <button onClick={stopMining} className="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded">Stop Mining</button>
        </div>
      </div>
      <div className="mt-8 text-center">
        <p className="text-sm">© 2025 Digital Currency Mining. All rights reserved.</p>
      </div>
    </div>
  );
};

export default App;