import { forwardRef } from "react";

/**
 * Avatar
 *
 * src:      string - image URL; renders <img> with alt text
 * alt:      string - alt text for the image (default: "Avatar")
 * icon:     ReactNode - shown when no src; add aria-hidden="true" if decorative
 * initials: string - shown when no src or icon, e.g. "WW"
 * size:     "xs" | "sm" | "md" | (default) | "lg" | "xl" | "2xl"
 * status:   "online" | "offline"
 *
 * Content priority: src → icon → initials → empty placeholder
 */
const Avatar = forwardRef(function Avatar(
  {
    src,
    alt = "Avatar",
    icon,
    initials,
    size,
    status,
    className = "",
    ...props
  },
  ref
) {
  const classes = [
    "prs-avatar",
    size === "2xl" && "prs-avatar-2xl",
    size === "xl"  && "prs-avatar-xl",
    size === "lg"  && "prs-avatar-lg",
    size === "md"  && "prs-avatar-md",
    size === "sm"  && "prs-avatar-sm",
    size === "xs"  && "prs-avatar-xs",
    status === "online"  && "prs-avatar-online",
    status === "offline" && "prs-avatar-offline",
    className,
  ]
    .filter(Boolean)
    .join(" ");

  return (
    <div ref={ref} className={classes} {...props}>
      {src ? (
        <img src={src} alt={alt} />
      ) : icon ? (
        icon
      ) : (
        <span className="prs-avatar-placeholder">
          {initials ?? null}
        </span>
      )}
    </div>
  );
});

export default Avatar;