import { jsx as _jsx } from "react/jsx-runtime";
import React, { useState } from "react";
import { getInitialLetters } from "../../helpers";
/**
 * Helper function to convert color names to CSS values
 */
const getColorValue = (color) => {
    if (!color)
        return undefined;
    // If already a valid CSS value (hex, rgb, rgba, hsl, etc.), return it
    if (color.startsWith("#") ||
        color.startsWith("rgb") ||
        color.startsWith("hsl")) {
        return color;
    }
    // Map common color names
    const colorMap = {
        white: "#ffffff",
        black: "#000000",
        "gray-800": "#1f2937",
        "gray-700": "#374151",
        "gray-600": "#4b5563",
        "gray-500": "#6b7280",
        "gray-400": "#9ca3af",
        "gray-300": "#d1d5db",
        "gray-200": "#e5e7eb",
        "gray-100": "#f3f4f6",
        "gray-50": "#f9fafb",
    };
    return colorMap[color.toLowerCase()] || color;
};
/**
 * Avatar component displays a circular avatar with initials or an image
 *
 * @example
 * // Basic usage with text
 * <Avatar text="John Doe" />
 *
 * @example
 * // With image
 * <Avatar text="John Doe" image="https://example.com/avatar.jpg" />
 *
 * @example
 * // Custom colors
 * <Avatar text="Jane Smith" bgColor="#3b82f6" textColor="#ffffff" />
 */
export const Avatar = ({ text, image, bgColor = "gray-600", textColor = "white", size = "md", className = "", }) => {
    const [imageError, setImageError] = useState(false);
    const initials = getInitialLetters(text);
    const showImage = image && !imageError;
    const sizeClasses = {
        sm: "w-8 h-8 text-xs",
        md: "w-10 h-10 text-sm",
        lg: "w-12 h-12 text-base",
    };
    const baseClasses = `
    rounded-full
    flex
    items-center
    justify-center
    font-semibold
    font-[var(--font-default)]
    overflow-hidden
    flex-shrink-0
    ${sizeClasses[size]}
    ${className}
  `;
    // Inline styles for colors (only if no image or image failed to load)
    const inlineStyles = showImage
        ? {}
        : {
            backgroundColor: getColorValue(bgColor) || bgColor || "#4b5563",
            color: getColorValue(textColor) || textColor || "#ffffff",
        };
    return (_jsx("div", { className: baseClasses, style: inlineStyles, title: text, role: "img", "aria-label": text, children: showImage ? (_jsx("img", { src: image, alt: text, className: "w-full h-full object-cover", onError: () => setImageError(true) })) : (_jsx("span", { children: initials })) }));
};
Avatar.displayName = "Avatar";
