'use client';

import { UserAvatar } from '@/components/id/user-avatar';
import { cn } from '@/lib/utils';

export function OnlineDot({ online, className }: { online?: boolean; className?: string }) {
  if (!online) return null;
  return (
    <span
      className={cn(
        'absolute bottom-0 right-0 z-10 h-3 w-3 rounded-full border-2 border-white bg-emerald-500 shadow-sm',
        className
      )}
      aria-hidden
    />
  );
}

export function AvatarWithPresence({
  userId,
  displayName,
  hasAvatar,
  token,
  isVerified,
  verificationIcon,
  online,
  className = 'h-9 w-9',
  badgeSize = 'xs'
}: {
  userId: string;
  displayName?: string;
  hasAvatar?: boolean;
  token: string | null;
  isVerified?: boolean;
  verificationIcon?: string | null;
  online?: boolean;
  className?: string;
  badgeSize?: 'xs' | 'sm' | 'md' | 'lg';
}) {
  return (
    <div className="relative inline-flex shrink-0">
      <UserAvatar
        userId={userId}
        displayName={displayName}
        hasAvatar={hasAvatar}
        token={token}
        isVerified={isVerified}
        verificationIcon={verificationIcon}
        className={className}
        badgeSize={badgeSize}
      />
      <OnlineDot online={online} />
    </div>
  );
}