ابحث عن الأغنية عبر الفيديو

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

const App = () => {
  const [videoLink, setVideoLink] = useState('');
  const [songName, setSongName] = useState('');
  const [songLink, setSongLink] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    setError('');
    try {
      // Simulate API call
      const response = await fetch(`https://api.example.com/detect-song?videoLink=${videoLink}`);
      const data = await response.json();
      if (data.success) {
        setSongName(data.songName);
        setSongLink(data.songLink);
      } else {
        setError('Failed to detect song.');
      }
    } catch (err) {
      setError('An error occurred while processing your request.');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="min-h-screen bg-gradient-to-r from-blue-500 to-purple-700 flex flex-col items-center justify-center p-4">
      <div className="bg-white rounded-lg shadow-2xl p-8 space-y-6 w-full max-w-lg">
        <h1 className="text-3xl font-bold text-center text-gray-800">Song Detect</h1>
        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <label className="block text-sm font-medium text-gray-700">Video Link</label>
            <input
              type="text"
              value={videoLink}
              onChange={(e) => setVideoLink(e.target.value)}
              className="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
              placeholder="Enter video link"
              required
            />
          </div>
          <button
            type="submit"
            className="w-full bg-blue-600 text-white py-2 rounded-md hover:bg-blue-700 transition duration-300"
            disabled={loading}
          >
            {loading ? 'Detecting...' : 'Detect Song'}
          </button>
        </form>
        {error && <p className="text-red-500 text-center">{error}</p>}
        {songName && (
          <div className="mt-4 text-center">
            <h2 className="text-xl font-semibold text-gray-800">Detected Song</h2>
            <p className="text-gray-600">{songName}</p>
            <a
              href={songLink}
              className="mt-2 inline-block bg-green-600 text-white py-2 px-4 rounded-md hover:bg-green-700 transition duration-300"
              target="_blank"
              rel="noopener noreferrer"
            >
              Download Song
            </a>
          </div>
        )}
      </div>
    </div>
  );
};

export default App;