import React from "react";

export function Avatar({ size = 32, src, alt = "", fallback, className = "", children, ...props }) {
  return (
    <span className={["o-avatar", className].filter(Boolean).join(" ")} data-slot="avatar" style={{ width: size, height: size }} {...props}>
      {src ? <img src={src} alt={alt} data-slot="avatar-image" /> : <span className="o-avatar__fallback" data-slot="avatar-fallback">{fallback}</span>}
      {children}
    </span>
  );
}
export function AvatarGroup({ className = "", children, ...props }) {
  return <span className={className} data-slot="avatar-group" style={{ display: "inline-flex" }} {...props}>{children}</span>;
}
