import { User as UserIcon, LogOut } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { User } from '../../types';
import { Button, Card } from '../ui';

interface UserInfoProps {
  user: User | null;
  onLogout: () => void;
}

export function UserInfo({ user, onLogout }: UserInfoProps) {
  const { t } = useTranslation();

  if (!user) return null;

  return (
    <Card>
      <div className="flex items-center justify-between mb-6">
        <div className="flex items-center gap-4">
          <div className="p-4 bg-gradient-to-br from-blue-500 to-purple-600 rounded-2xl">
            <UserIcon className="w-8 h-8 text-white" />
          </div>
          <div>
            <h2 className="text-2xl font-bold text-gray-900 dark:text-white">
              {user.username || user.email || t('profile.anonymous')}
            </h2>
            <p className="text-gray-600 dark:text-gray-400">
              {user.email || t('profile.noEmail')}
            </p>
          </div>
        </div>
        <Button variant="danger" onClick={onLogout}>
          <LogOut className="w-5 h-5 mr-2" />
          {t('profile.logout')}
        </Button>
      </div>
    </Card>
  );
}