import { jsxs, jsx } from 'react/jsx-runtime';
import React__default from 'react';
import { motion } from 'motion/react';
import { XMarkIcon } from '@heroicons/react/24/outline';
import { cn } from '../../../utils/cn.js';
import { Avatar } from '../Avatar/Avatar.js';
import { tagTheme } from './Tag.theme.js';
import { tagVariants, tagLayoutTransition } from './Tag.animations.js';

/**
 * Tag component for displaying removable labels or keywords.
 *
 * @component
 * @example
 * ```tsx
 * <Tag onRemove={() => handleRemove('tag1')}>JavaScript</Tag>
 * <Tag avatar={{ src: "/avatar.jpg", name: "Alice" }} onRemove={() => {}}>Alice</Tag>
 * <Tag startContent={<CodeIcon className="size-4" />} onRemove={() => {}}>React</Tag>
 * ```
 */
const Tag = React__default.forwardRef(({ children, size = "md", removable = true, onRemove, avatar, startContent, disabled = false, className, theme: customTheme, ...props }, ref) => {
    var _a, _b, _c;
    // Merge default theme with custom theme overrides
    const theme = {
        baseStyle: (_a = customTheme === null || customTheme === void 0 ? void 0 : customTheme.baseStyle) !== null && _a !== void 0 ? _a : tagTheme.baseStyle,
        sizes: { ...tagTheme.sizes, ...customTheme === null || customTheme === void 0 ? void 0 : customTheme.sizes },
        avatarSizes: { ...tagTheme.avatarSizes, ...customTheme === null || customTheme === void 0 ? void 0 : customTheme.avatarSizes },
        startContentSizes: {
            ...tagTheme.startContentSizes,
            ...customTheme === null || customTheme === void 0 ? void 0 : customTheme.startContentSizes,
        },
        disabledStyle: (_b = customTheme === null || customTheme === void 0 ? void 0 : customTheme.disabledStyle) !== null && _b !== void 0 ? _b : tagTheme.disabledStyle,
        removeButtonStyle: (_c = customTheme === null || customTheme === void 0 ? void 0 : customTheme.removeButtonStyle) !== null && _c !== void 0 ? _c : tagTheme.removeButtonStyle,
        removeIconSizes: {
            ...tagTheme.removeIconSizes,
            ...customTheme === null || customTheme === void 0 ? void 0 : customTheme.removeIconSizes,
        },
    };
    const hasLeadingContent = !!(avatar || startContent);
    const showRemoveButton = removable && onRemove && !disabled;
    const handleRemove = (e) => {
        e.stopPropagation();
        if (!disabled && onRemove) {
            onRemove();
        }
    };
    // Avatar takes precedence over startContent
    const renderLeadingContent = () => {
        if (avatar) {
            return (jsx("span", { className: cn("inline-flex items-center justify-center shrink-0 overflow-hidden rounded-full", theme.avatarSizes[size]), children: jsx(Avatar, { src: avatar.src, name: avatar.name, fallback: avatar.fallback, initialsCount: avatar.initialsCount, size: "xs", className: "!size-full border-0 rounded-full" }) }));
        }
        if (startContent) {
            return (jsx("span", { className: cn("inline-flex items-center justify-center shrink-0", theme.startContentSizes[size]), children: startContent }));
        }
        return null;
    };
    return (jsxs(motion.span, { ref: ref, className: cn(theme.baseStyle, theme.sizes[size], hasLeadingContent && "pl-0.5", showRemoveButton && "pr-0.5", disabled && theme.disabledStyle, className), layout: true, transition: tagLayoutTransition, variants: tagVariants, exit: "exit", "data-size": size, "data-disabled": disabled ? "true" : "false", "data-removable": removable ? "true" : "false", "data-has-avatar": avatar ? "true" : "false", ...props, children: [renderLeadingContent(), children, showRemoveButton && (jsx("button", { type: "button", onClick: handleRemove, className: theme.removeButtonStyle, "aria-label": `Remove ${typeof children === "string" ? children : "tag"}`, children: jsx(XMarkIcon, { className: theme.removeIconSizes[size] }) }))] }));
});
Tag.displayName = "Tag";

export { Tag };
