import React from 'react';

interface InvitationModalProps {
  isOpen: boolean;
  inviterName?: string;
  sessionTitle?: string;
  onAccept: () => void;
  onDecline: () => void;
  onViewOnly: () => void;
}

const InvitationModal: React.FC<InvitationModalProps> = ({
  isOpen,
  inviterName = "Someone",
  sessionTitle = "music session",
  onAccept,
  onDecline,
  onViewOnly
}) => {
  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
      <div className="bg-background-primary rounded-2xl shadow-2xl max-w-md w-full p-6 animate-in fade-in zoom-in duration-300">
        {/* Header */}
        <div className="text-center mb-6">
          <div className="w-16 h-16 bg-gradient-to-r from-accent-orange to-accent-pink rounded-full mx-auto mb-4 flex items-center justify-center shadow-lg">
            <span className="text-2xl">🎵</span>
          </div>
          <h2 className="text-2xl font-bold text-foreground-primary mb-2">
            You're Invited!
          </h2>
          <p className="text-foreground-secondary leading-relaxed">
            <span className="font-semibold text-foreground-primary">{inviterName}</span> invited you to collaborate on their {sessionTitle}
          </p>
        </div>

        {/* Content */}
        <div className="bg-gradient-to-r from-accent-blue/10 to-accent-purple/10 rounded-xl p-4 mb-6 border border-accent-blue/20">
          <div className="flex items-center space-x-3">
            <div className="w-8 h-8 bg-accent-blue rounded-full flex items-center justify-center flex-shrink-0">
              <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
              </svg>
            </div>
            <div>
              <p className="text-sm font-medium text-accent-blue">Collaborative Session</p>
              <p className="text-xs text-accent-blue/80">Add your own layers and create music together!</p>
            </div>
          </div>
        </div>

        {/* Actions */}
        <div className="space-y-3">
          {/* Primary Actions */}
          <div className="flex space-x-3">
            <button
              onClick={onViewOnly}
              className="flex-1 px-4 py-3 bg-background-secondary hover:bg-background-tertiary text-foreground-secondary font-medium rounded-xl transition-colors"
            >
              Just View
            </button>
            <button
              onClick={onAccept}
              className="flex-1 px-4 py-3 bg-gradient-to-r from-accent-blue to-accent-blue/90 hover:from-accent-blue/90 hover:to-accent-blue/80 text-white font-medium rounded-xl transition-all shadow-lg hover:shadow-xl"
            >
              Join & Collaborate
            </button>
          </div>
          
          {/* Secondary Action */}
          <button
            onClick={onDecline}
            className="w-full px-4 py-2 text-foreground-tertiary hover:text-foreground-secondary text-sm font-medium transition-colors"
          >
            Maybe Later
          </button>
        </div>

        {/* Footer */}
        <div className="mt-4 text-center">
          <p className="text-xs text-foreground-tertiary">
            Powered by <span className="font-semibold">SUNO</span> Music Generator
          </p>
        </div>
      </div>
    </div>
  );
};

export default InvitationModal;