pipeline/frontend/components/messenger/UserAvatar.tsx

"use client";

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { cn } from "@/lib/utils";

interface UserAvatarProps {
  photo?: string | null;
  name: string;
  size?: "sm" | "md" | "lg";
  online?: boolean;
}

const sizeMap = {
  sm: "h-7 w-7 text-xs",
  md: "h-9 w-9 text-sm",
  lg: "h-11 w-11 text-base",
};

const dotSizeMap = {
  sm: "h-2 w-2",
  md: "h-2.5 w-2.5",
  lg: "h-3 w-3",
};

export function UserAvatar({ photo, name, size = "md", online }: UserAvatarProps) {
  return (
    <div className="relative inline-block shrink-0">
      <Avatar className={cn(sizeMap[size])}>
        {photo && <AvatarImage src={photo} alt={name} />}
        <AvatarFallback className="bg-muted text-muted-foreground">
          {name.charAt(0).toUpperCase()}
        </AvatarFallback>
      </Avatar>
      {online !== undefined && (
        <span
          className={cn(
            "absolute bottom-0 right-0 rounded-full border-2 border-background",
            dotSizeMap[size],
            online ? "bg-green-500" : "bg-gray-300"
          )}
        />
      )}
    </div>
  );
}