اصنعي تطبيق مثل Shazam

import React, { useState, useEffect } from 'react';

const App = () => {
  const [isListening, setIsListening] = useState(false);
  const [songInfo, setSongInfo] = useState(null);

  const startListening = () => {
    setIsListening(true);
    // Simulate song recognition
    setTimeout(() => {
      setSongInfo({
        title: 'Song Title',
        artist: 'Artist Name',
        album: 'Album Name',
        cover: 'https://placehold.co/300X300',
      });
      setIsListening(false);
    }, 2000);
  };

  return (
    <div className='min-h-screen bg-gradient-to-b from-blue-900 to-black text-white flex flex-col items-center justify-center'>
      <h1 className='text-4xl font-bold mb-8'>Shazam Clone</h1>
      <div className='bg-white/10 p-8 rounded-lg shadow-lg text-center'>
        {isListening ? (
          <div className='flex flex-col items-center'>
            <div className='w-16 h-16 border-4 border-blue-500 rounded-full animate-spin'></div>
            <p className='mt-4'>Listening...</p>
          </div>
        ) : songInfo ? (
          <div className='flex flex-col items-center'>
            <img src={songInfo.cover} alt='Album Cover' className='w-48 h-48 rounded-lg mb-4' />
            <h2 className='text-2xl font-bold'>{songInfo.title}</h2>
            <p className='text-lg'>{songInfo.artist}</p>
            <p className='text-sm text-gray-400'>{songInfo.album}</p>
          </div>
        ) : (
          <button
            onClick={startListening}
            className='bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full transition duration-300'
          >
            Tap to Shazam
          </button>
        )}
      </div>
      <footer className='mt-8 text-sm text-gray-400'>
        © 2025 Shazam Clone. All rights reserved.
      </footer>
    </div>
  );
};

export default App;