'use client';

import { User } from 'lucide-react';
import { getGravatarUrl, isGravatarUrl } from '@/lib/gravatar';

interface AvatarProps {
  url?: string | null;
  email?: string;
  name?: string;
  size?: number;
  className?: string;
}

export function Avatar({
  url,
  email,
  name,
  size = 40,
  className = '',
}: AvatarProps) {
  // Déterminer l'URL de l'avatar à utiliser
  let avatarUrl: string | null = url || null;

  // Si pas d'avatar mais que c'est peut-être un Gravatar, essayer de le détecter
  if (!avatarUrl && email && url && isGravatarUrl(url)) {
    avatarUrl = url;
  }

  // Si pas d'URL mais qu'on a un email, utiliser Gravatar par défaut
  if (!avatarUrl && email) {
    avatarUrl = getGravatarUrl(email, { size });
  }

  if (avatarUrl) {
    return (
      /* eslint-disable-next-line @next/next/no-img-element */
      <img
        src={avatarUrl}
        alt={name ? `Avatar de ${name}` : 'Avatar'}
        className={`rounded-full object-cover ${className}`}
        style={{ width: size, height: size }}
      />
    );
  }

  // Fallback icon
  return (
    <div
      className={`rounded-full bg-[var(--primary)]/20 border-[var(--primary)]/30 flex items-center justify-center ${className}`}
      style={{ width: size, height: size }}
    >
      <User
        style={{ width: size * 0.5, height: size * 0.5 }}
        className="text-[var(--primary)]"
      />
    </div>
  );
}
