import * as React from 'react';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { useAvatarUrl } from '@/hooks/use-avatar-url';

interface HumanAvatarProps extends Omit<
  React.ComponentProps<typeof Avatar>,
  'children'
> {
  /** Object id of the human's profile picture, if any. */
  avatarObjectId?: string | null;
  /** Initials rendered while loading or when no picture is set. */
  initials: string;
  /** Extra classes for the initials fallback. */
  fallbackClassName?: string;
}

/**
 * Renders a human's avatar: their profile picture when set (resolved to a
 * signed URL), otherwise their initials. The fallback also shows while the
 * image loads or if it fails, so this is a drop-in for the initials-only
 * <Avatar> usages throughout the app.
 */
export function HumanAvatar({
  avatarObjectId,
  initials,
  fallbackClassName,
  ...props
}: HumanAvatarProps) {
  const url = useAvatarUrl(avatarObjectId);
  return (
    <Avatar {...props}>
      <AvatarImage src={url} alt={initials} />
      <AvatarFallback className={fallbackClassName}>{initials}</AvatarFallback>
    </Avatar>
  );
}