import React, { useState } from 'react';

interface UserAuthFormProps {
  // Add any props you need
}

export function UserAuthForm({ }: UserAuthFormProps) {
  const [isLoading, setIsLoading] = useState<boolean>(false);
  const [email, setEmail] = useState<string>('');

  async function onSubmit() {
    setIsLoading(true);
    setTimeout(() => {
      setIsLoading(false);
    }, 3000);
  }

  return (
    <div className="auth-container">
      <div className="auth-form">
        <div className="input-container">
          <input
            type="email"
            className="auth-input"
            placeholder="name@example.com"
            autoCapitalize="off"
            autoComplete="email"
            autoCorrect="off"
            disabled={isLoading}
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />
        </div>
        <button
          className="auth-button"
          onClick={onSubmit}
          disabled={isLoading}
        >
          {isLoading ? (
            <span className="auth-spinner" />
          ) : (
            'Sign In with Email'
          )}
        </button>
      </div>
      <div className="auth-divider">
        <div className="divider-line" />
        <span className="divider-text">Or continue with</span>
        <div className="divider-line" />
      </div>
      <button
        className="github-button"
        onClick={() => {}}
        disabled={isLoading}
      >
        {isLoading ? (
          <span className="auth-spinner" />
        ) : (
          <span>GitHub Icon</span>
        )}
        <span>GitHub</span>
      </button>
    </div>
  );
}