import React from 'react';
import { Card } from './ui/card';

export function UserProfile({ user }: { user: { login: string; avatarUrl: string; email: string } }) {
  return (
    <Card className="max-w-md mx-auto p-6 mt-8">
      <div className="flex items-center gap-4">
        <img src={user.avatarUrl} alt={user.login} className="h-16 w-16 rounded-full" />
        <div>
          <h2 className="text-lg font-bold">{user.login}</h2>
          <p className="text-xs text-muted-foreground">{user.email}</p>
        </div>
      </div>
      <div className="mt-6">
        <h3 className="font-semibold mb-2">Progress</h3>
        <p>Curriculum chapters completed: <span className="font-bold">(stub)</span></p>
        <p>Recent projects: <span className="font-bold">(stub)</span></p>
      </div>
    </Card>
  );
}