import React from 'react';
import { useAuth } from '../context/AuthContext';

export const LoginButton: React.FC = () => {
  const { user, loading } = useAuth();

  if (loading) {
    return <div>Loading...</div>;
  }

  if (user) {
    return (
      <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
        <img 
          src={user.avatar_url} 
          alt={user.display_name} 
          style={{ 
            width: '32px', 
            height: '32px', 
            borderRadius: '50%' 
          }}
        />
      </div>
    );
  }

  return null; // this makes the login button not apear when we alr logged in
};