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

export default function AudioPlayerSection({
  audioUrl,
  onDownload
}: AudioPlayerSectionProps) {
  return (
    <div className="card-modern p-8 space-y-6">
      {/* Success Header */}
      <div className="text-center">
        <div className="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-br from-green-400 to-emerald-500 rounded-2xl mb-4">
          <span className="text-3xl">🎉</span>
        </div>
        <h2 className="text-3xl font-bold text-gray-900 mb-2">
          Your Audiobook is Ready!
        </h2>
        <p className="text-gray-600">
          Listen below or download to enjoy offline
        </p>
      </div>
      
      {/* Audio Player */}
      <div className="p-6 bg-gradient-to-br from-indigo-50 to-purple-50 rounded-xl border border-indigo-100">
        <audio
          controls
          src={audioUrl}
          className="w-full"
          preload="metadata"
        >
          Your browser does not support the audio element.
        </audio>
      </div>

      {/* Download Button */}
      <div className="flex justify-center">
        <button
          onClick={onDownload}
          className="btn-primary flex items-center gap-2"
        >
          <span>⬇️</span>
          Download Audiobook
        </button>
      </div>

      {/* Success Message */}
      <div className="p-4 bg-green-50 border border-green-200 text-green-800 rounded-xl text-center">
        <p className="font-medium">
          ✅ Your audiobook has been successfully generated!
        </p>
      </div>
    </div>
  );
}