import React from 'react';
import { useAuth } from '../../auth/AuthProvider';

export default function SignInStep() {
    const { signIn, isLoading, error } = useAuth();

    return (
        <div className="step-card">
            <div className="step-header">
                <span className="step-icon">🔐</span>
                <h2>Create Your Account</h2>
                <p className="step-description">
                    Sign in with your preferred provider to get started with AdPlatform.
                </p>
            </div>

            {error && <div className="error-message">{error}</div>}

            <div className="provider-list">
                <button
                    className="btn-provider btn-provider-google"
                    onClick={() => signIn('google')}
                    disabled={isLoading}
                >
                    <span className="provider-icon">G</span>
                    {isLoading ? 'Connecting...' : 'Continue with Google'}
                </button>

                <button
                    className="btn-provider btn-provider-apple"
                    onClick={() => signIn('apple')}
                    disabled={isLoading}
                >
                    <span className="provider-icon">🍎</span>
                    {isLoading ? 'Connecting...' : 'Continue with Apple'}
                </button>

                <button
                    className="btn-provider btn-provider-microsoft"
                    onClick={() => signIn('microsoft')}
                    disabled={isLoading}
                >
                    <span className="provider-icon">⊞</span>
                    {isLoading ? 'Connecting...' : 'Continue with Microsoft'}
                </button>
            </div>

            <p className="step-fine-print">
                By continuing, you agree to AdPlatform's Terms of Service and Privacy Policy.
                Your account will be managed through Microsoft Entra External ID.
            </p>
        </div>
    );
}
