import React from 'react';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from './ui/dialog';
import { Button } from './ui/button';
import { Card } from './ui/card';
import { Sparkle } from '@phosphor-icons/react';

interface PassportLoginProps {
  open: boolean;
  onClose: () => void;
  onLoginSuccess: (user: { login: string; avatarUrl: string; email: string }) => void;
}

export function PassportLogin({ open, onClose, onLoginSuccess }: PassportLoginProps) {
  const handleLogin = async () => {
    // Stub: Replace with real OAuth flow
    const user = {
      login: 'demo_user',
      avatarUrl: 'https://avatars.githubusercontent.com/u/1?v=4',
      email: 'demo@aethex.io',
    };
    onLoginSuccess(user);
    onClose();
  };

  return (
    <Dialog open={open} onOpenChange={onClose}>
      <DialogContent className="max-w-[400px]">
        <DialogHeader>
          <DialogTitle className="text-xl flex items-center gap-2">
            <Sparkle className="text-accent" size={20} /> AeThex Passport Login
          </DialogTitle>
        </DialogHeader>
        <Card className="p-4 mt-2">
          <p className="text-sm mb-4">Sign in with your AeThex Passport account to access private projects and sync your progress.</p>
          <Button variant="accent" className="w-full" onClick={handleLogin}>
            Sign in with Passport
          </Button>
        </Card>
      </DialogContent>
    </Dialog>
  );
}