import { jsx as _jsx } from "react/jsx-runtime";
import { Image } from "../../../components/atoms/Image";
import { cn } from "../../../utils/cn";
const sizeStyles = {
    sm: "w-8 h-8 text-sm",
    md: "w-12 h-12 text-base",
    lg: "w-16 h-16 text-xl",
    xl: "w-24 h-24 text-3xl",
};
export const Avatar = ({ src, alt, name, size = "md", className, priority = false, testId, }) => {
    const initials = name
        ?.split(" ")
        .map((n) => n[0])
        .join("")
        .toUpperCase()
        .slice(0, 2);
    // Calculate sizes for responsive images
    const sizesValue = size === "sm"
        ? "32px"
        : size === "md"
            ? "48px"
            : size === "lg"
                ? "64px"
                : "96px";
    return (_jsx("div", { className: cn("relative rounded-full overflow-hidden flex items-center justify-center", "bg-gradient-to-br from-primary-400 to-secondary-500", "text-white font-bold", sizeStyles[size], className), "data-testid": testId, children: src ? (_jsx(Image, { src: src, alt: alt || name || "Avatar", fill: true, className: "object-cover", sizes: sizesValue, priority: priority, quality: 85, testId: testId ? `${testId}.image` : undefined })) : (_jsx("span", { "data-testid": testId ? `${testId}.initials` : undefined, children: initials || "?" })) }));
};
export default Avatar;
