'use client';

import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { VerificationBadge } from '@/components/id/verification-badge';
import { useAvatarUrl } from '@/hooks/use-avatar-url';
import { cn } from '@/lib/utils';

export function UserAvatar({
  userId,
  displayName,
  hasAvatar,
  token,
  isVerified,
  verificationIcon,
  className,
  badgeSize = 'sm',
  fallbackClassName
}: {
  userId: string;
  displayName?: string;
  hasAvatar?: boolean;
  token: string | null;
  isVerified?: boolean;
  verificationIcon?: string | null;
  className?: string;
  badgeSize?: 'xs' | 'sm' | 'md' | 'lg';
  fallbackClassName?: string;
}) {
  const { avatarUrl } = useAvatarUrl(userId, hasAvatar, token);
  const initials = (displayName ?? '')
    .split(' ')
    .map((part) => part[0])
    .join('')
    .slice(0, 2)
    .toUpperCase() || 'ID';

  return (
    <div className="relative inline-flex shrink-0">
      <Avatar className={className}>
        {avatarUrl ? <AvatarImage src={avatarUrl} alt={displayName ?? 'Аватар'} /> : null}
        <AvatarFallback className={cn('bg-[linear-gradient(135deg,#6f58ff,#ffd2a8)] text-xs font-semibold', fallbackClassName)}>
          {initials.slice(0, 2)}
        </AvatarFallback>
      </Avatar>
      {isVerified ? (
        <VerificationBadge
          verificationIcon={verificationIcon}
          size={badgeSize}
          className="absolute -top-0.5 -right-0.5 z-20"
        />
      ) : null}
    </div>
  );
}