'use client';

import { useState, useEffect } from 'react';

interface Track {
  title: string;
  artist: string;
  album?: string;
}

export default function NowPlaying() {
  const [currentTrack, setCurrentTrack] = useState<Track>({
    title: 'AeThex Live Stream',
    artist: 'AeThex LABS',
    album: 'Live Broadcast',
  });

  useEffect(() => {
    // Simulate track updates
    // In a real app, this would fetch from an API
    const tracks: Track[] = [
      { title: 'AeThex Live Stream', artist: 'AeThex LABS', album: 'Live Broadcast' },
      { title: 'Cybernetic Dreams', artist: 'AeThex LABS', album: 'Digital Futures' },
      { title: 'Neural Network', artist: 'AeThex LABS', album: 'AI Symphony' },
    ];

    let index = 0;
    const interval = setInterval(() => {
      index = (index + 1) % tracks.length;
      setCurrentTrack(tracks[index]);
    }, 30000); // Change every 30 seconds

    return () => clearInterval(interval);
  }, []);

  return (
    <div className="bg-black/50 backdrop-blur-sm border border-cyan-500/30 rounded-lg p-4">
      <div className="flex items-start gap-3">
        <div className="flex-shrink-0 w-12 h-12 bg-gradient-to-br from-cyan-500 to-blue-600 rounded-lg flex items-center justify-center">
          <svg
            className="w-6 h-6 text-white"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"
            />
          </svg>
        </div>
        <div className="flex-1 min-w-0">
          <p className="text-cyan-400/60 text-xs font-mono uppercase tracking-wider mb-1">
            Now Playing
          </p>
          <h3 className="text-white font-semibold text-sm truncate">
            {currentTrack.title}
          </h3>
          <p className="text-cyan-400/80 text-xs truncate">
            {currentTrack.artist}
          </p>
          {currentTrack.album && (
            <p className="text-cyan-400/60 text-xs truncate">
              {currentTrack.album}
            </p>
          )}
        </div>
      </div>
    </div>
  );
}