import { jsx } from 'react/jsx-runtime';
import React__default from 'react';
import { skeletonTheme } from './Skeleton.theme.js';
import { cn } from '../../../utils/cn.js';

/**
 * Skeleton component - Loading placeholder that mimics content shape
 *
 * Features:
 * - Multiple variants: text, circular, rectangle
 * - Customizable dimensions
 * - Pulse animation
 * - Multi-line support for text variant
 * - Full theme customization
 *
 * @example
 * // Text lines
 * <Skeleton variant="text" lines={3} />
 *
 * // Avatar placeholder
 * <Skeleton variant="circular" width={40} height={40} />
 *
 * // Card placeholder
 * <Skeleton variant="rectangle" width="100%" height={200} />
 */
const Skeleton = React__default.forwardRef(({ variant = 'rectangle', width, height, lines = 1, animate = true, className, theme: customTheme, style, ...props }, ref) => {
    // Merge custom theme with default theme
    const theme = customTheme ? { ...skeletonTheme, ...customTheme } : skeletonTheme;
    // Convert dimensions to CSS values
    const getSize = (value) => {
        if (value === undefined)
            return undefined;
        if (typeof value === 'number')
            return `${value}px`;
        return value;
    };
    const computedWidth = getSize(width);
    const computedHeight = getSize(height);
    // Compute styles
    const computedStyle = {
        ...style,
        width: computedWidth,
        height: computedHeight,
    };
    // Base classes
    const baseClasses = cn(theme.baseStyle, theme.variants[variant], animate && theme.animation, className);
    // For text variant with multiple lines, render multiple skeletons
    if (variant === 'text' && lines > 1) {
        return (jsx("div", { ref: ref, className: "space-y-2", ...props, children: Array.from({ length: lines }).map((_, index) => {
                // Make last line 75% width for more natural look
                const isLastLine = index === lines - 1;
                const lineWidth = isLastLine && !width ? '75%' : computedWidth;
                return (jsx("div", { className: baseClasses, style: { ...computedStyle, width: lineWidth } }, index));
            }) }));
    }
    // Single skeleton
    return (jsx("div", { ref: ref, className: baseClasses, style: computedStyle, "aria-busy": "true", "aria-live": "polite", ...props }));
});
Skeleton.displayName = 'Skeleton';

export { Skeleton };
