import React from 'react';
import Avatar from './Avatar';

const IncomingCallUI = ({ callerUsername, callerAvatarUrl, onJoin, onReject }) => {
    return (
        <div className="incoming-call-ui">
            <div className="incoming-call-avatar-ring">
                <Avatar username={callerUsername} avatarUrl={callerAvatarUrl} size={80} />
            </div>
            <div className="incoming-call-username">{callerUsername}</div>
            <div className="incoming-call-subtitle">Incoming call...</div>
            <div className="incoming-call-buttons">
                <button className="incoming-call-btn join" onClick={onJoin} title="Join Call">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.01-.24c1.12.37 2.33.57 3.58.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.46.57 3.58a1 1 0 0 1-.25 1.01l-2.2 2.2z"/>
                    </svg>
                </button>
                <button className="incoming-call-btn reject" onClick={onReject} title="Reject">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M12 9c-1.6 0-3.15.25-4.6.72v3.1c0 .39-.23.74-.56.9-.98.49-1.87 1.12-2.66 1.85-.18.18-.43.28-.7.28a1 1 0 0 1-.71-.3L.29 13.08a1 1 0 0 1 0-1.41C3.57 8.55 7.53 7 12 7s8.43 1.55 11.71 4.67a1 1 0 0 1 0 1.41l-2.48 2.48a1 1 0 0 1-.7.29c-.27 0-.52-.11-.7-.28a11.27 11.27 0 0 0-2.67-1.85.99.99 0 0 1-.56-.9v-3.1A15.9 15.9 0 0 0 12 9z"/>
                    </svg>
                </button>
            </div>
        </div>
    );
};

export default IncomingCallUI;
