import { useState } from 'react';
import { Play, Pause, ExternalLink } from 'lucide-react';

export default function MusicPlayer() {
  const [currentSong, setCurrentSong] = useState(null);
  const [isPlaying, setIsPlaying] = useState(false);

  const topSongs2024 = [
    {
      title: "Vampire",
      artist: "Olivia Rodrigo",
      cover: "https://images.unsplash.com/photo-1470225620780-dba8ba36b745?w=800&h=800&fit=crop",
      preview: "https://p.scdn.co/mp3-preview/8ef0ca5ac3afa10a51fa5069e4d5096d84fd428e",
      spotify: "https://open.spotify.com/track/1kuGVB7EU95pJObxwvfwKS",
      appleMusic: "https://music.apple.com/us/album/vampire/1694386825?i=1694386826",
      soundcloud: "https://soundcloud.com/oliviarodrigo/vampire"
    },
    {
      title: "Last Night",
      artist: "Morgan Wallen",
      cover: "https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?w=800&h=800&fit=crop",
      preview: "https://p.scdn.co/mp3-preview/dd4d8d66b43b46105b5c7d5f746aecc47a45e8d4",
      spotify: "https://open.spotify.com/track/7K3BhSpAxZBznislvUMVtn",
      appleMusic: "https://music.apple.com/us/album/last-night/1665491101?i=1665491111",
      soundcloud: "https://soundcloud.com/morganwallen/last-night"
    },
    {
      title: "Cruel Summer",
      artist: "Taylor Swift",
      cover: "https://images.unsplash.com/photo-1501386761578-eac5c94b800a?w=800&h=800&fit=crop",
      preview: "https://p.scdn.co/mp3-preview/82b87d7e3ad953075f27d4bf3fb58bb84596a111",
      spotify: "https://open.spotify.com/track/1BxfuPKGuaTgP7aM0Bbdwr",
      appleMusic: "https://music.apple.com/us/album/cruel-summer/1468058165?i=1468058172",
      soundcloud: "https://soundcloud.com/taylorswift/cruel-summer"
    }
  ];

  const handlePlay = (song) => {
    if (currentSong?.title === song.title) {
      setIsPlaying(!isPlaying);
    } else {
      setCurrentSong(song);
      setIsPlaying(true);
    }
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-purple-900 via-gray-900 to-black text-white p-8">
      <div className="max-w-4xl mx-auto">
        <h1 className="text-4xl font-bold mb-2 text-center">Top Hits 2024</h1>
        <p className="text-gray-400 text-center mb-12">Listen to previews and open in your favorite music service</p>
        
        <div className="grid gap-6">
          {topSongs2024.map((song) => (
            <div key={song.title} className="bg-white/10 backdrop-blur-lg rounded-xl p-6 flex items-center gap-6 hover:bg-white/20 transition-all">
              <img 
                src={song.cover} 
                alt={song.title} 
                className="w-24 h-24 rounded-lg object-cover"
              />
              
              <div className="flex-1">
                <h2 className="text-xl font-semibold mb-1">{song.title}</h2>
                <p className="text-gray-400 mb-4">{song.artist}</p>
                
                <div className="flex items-center gap-4">
                  <button
                    onClick={() => handlePlay(song)}
                    className="bg-green-500 hover:bg-green-600 transition-colors p-3 rounded-full"
                  >
                    {currentSong?.title === song.title && isPlaying ? (
                      <Pause size={20} />
                    ) : (
                      <Play size={20} />
                    )}
                  </button>
                  
                  <a 
                    href={song.spotify}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="bg-[#1DB954] hover:bg-[#1ed760] transition-colors px-4 py-2 rounded-full flex items-center gap-2"
                  >
                    Spotify <ExternalLink size={16} />
                  </a>
                  
                  <a 
                    href={song.appleMusic}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="bg-[#FB233B] hover:bg-[#ff1d36] transition-colors px-4 py-2 rounded-full flex items-center gap-2"
                  >
                    Apple Music <ExternalLink size={16} />
                  </a>
                  
                  <a 
                    href={song.soundcloud}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="bg-[#FF5500] hover:bg-[#ff7733] transition-colors px-4 py-2 rounded-full flex items-center gap-2"
                  >
                    SoundCloud <ExternalLink size={16} />
                  </a>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}