import React, { useEffect } from 'react';

interface LoginWithAppleProps {
  clientId: string;
  redirectUri: string;
  scope?: string;
}



const LoginWithApple: React.FC<LoginWithAppleProps> = ({ clientId, redirectUri, scope }) => {
  useEffect(() => {
    // Initialize the Apple login button
    const script = document.createElement('script');
    script.src = 'https://appleid.cdn-apple.com/appleid/auth/2.0/appleid.auth.js';
    script.async = true;
    document.body.appendChild(script);

    script.onload = () => {
      window.AppleID.auth.init({
        clientId: clientId,
        scope: scope || 'name email',
        redirectURI: redirectUri,
      });
    };
  }, [clientId, redirectUri, scope]);

  return (
    <div id="appleid-button">
      <button onClick={() => window.AppleID.auth.signIn()}>Sign in with Apple</button>
    </div>
  );
};

export default LoginWithApple;