interface AudioPlayerSectionProps {
  audioUrl: string;
  onDownload: () => void;
}

export default function AudioPlayerSection({
  audioUrl,
  onDownload
}: AudioPlayerSectionProps) {
  return (
    <div className="w-full max-w-4xl mx-auto p-6 sm:p-8 glass-effect rounded-3xl shadow-glow-strong card-hover">
      {/* Success Header */}
      <div className="text-center mb-8">
        <div className="inline-block mb-6">
          <div className="w-24 h-24 sm:w-28 sm:h-28 mx-auto bg-gradient-to-br from-green-400 via-emerald-500 to-teal-600 rounded-3xl shadow-2xl flex items-center justify-center animate-bounce shadow-green-500/50">
            <span className="text-5xl sm:text-6xl">🎉</span>
          </div>
        </div>
        <h2 className="text-3xl sm:text-4xl md:text-5xl font-extrabold gradient-text-animated mb-3">
          Your Audiobook is Ready!
        </h2>
        <p className="text-gray-700 text-base sm:text-lg font-medium">
          Listen below or download to enjoy offline
        </p>
      </div>
      
      {/* Audio Player Card */}
      <div className="bg-gradient-to-br from-purple-50 via-indigo-50 to-pink-50 rounded-3xl shadow-2xl p-6 sm:p-10 mb-8 border-2 border-purple-300 hover:shadow-3xl transition-all">
        <div className="flex items-center gap-4 mb-6">
          <div className="w-14 h-14 bg-gradient-to-br from-purple-500 via-purple-600 to-indigo-600 rounded-2xl flex items-center justify-center shadow-lg shadow-purple-500/50">
            <span className="text-2xl">🎧</span>
          </div>
          <div>
            <h3 className="text-xl sm:text-2xl font-extrabold text-gray-800">Listen Now</h3>
            <p className="text-sm text-gray-600">Your personalized audiobook</p>
          </div>
        </div>
        
        <audio
          controls
          src={audioUrl}
          className="w-full min-h-[54px] rounded-2xl shadow-xl"
          preload="metadata"
          style={{
            filter: 'drop-shadow(0 8px 16px rgba(0, 0, 0, 0.15))'
          }}
        >
          Your browser does not support the audio element.
        </audio>
      </div>

      {/* Download Button */}
      <div className="flex justify-center mb-6">
        <button
          onClick={onDownload}
          className="px-12 py-6 min-h-[60px] bg-gradient-to-r from-green-500 via-emerald-600 to-teal-600 hover:from-green-600 hover:via-emerald-700 hover:to-teal-700 text-white font-extrabold rounded-2xl transition-all cursor-pointer touch-manipulation shadow-2xl text-lg sm:text-xl shadow-green-500/50 relative overflow-hidden"
        >
          <span className="flex items-center justify-center gap-4 relative z-10">
            <span className="text-2xl">⬇️</span>
            Download Audiobook
          </span>
        </button>
      </div>

      {/* Success Message */}
      <div className="p-6 bg-gradient-to-r from-green-50 via-emerald-50 to-teal-50 border-2 border-green-300 text-green-900 rounded-2xl shadow-lg text-center text-sm sm:text-base">
        <div className="flex items-center justify-center gap-3 mb-2">
          <span className="text-3xl">✅</span>
          <p className="font-extrabold text-lg">Success!</p>
        </div>
        <p className="font-medium">
          Your audiobook has been successfully generated with AI-powered voices!
        </p>
      </div>
    </div>
  );
}