'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// packages/ui/src/components/common/Skeleton.tsx
/**
 * @fileoverview Skeleton component
 * @description Skeleton loading component with multiple variants
 *
 * ESCAPE HATCHES: width/height props provided for precise control in composites
 * and complex layouts. For most cases, prefer className with utility classes.
 *
 * @version 0.0.1
 * @since 0.0.1
 * @author AMBROISE PARK Consulting
 */
import { cn, Stack } from '@donotdev/components';
/**
 * Skeleton - A loading placeholder component
 *
 * Features:
 * - Multiple variants for different content types
 * - Configurable dimensions via escape hatch props
 * - Accessibility support
 * - Smooth animations
 *
 * STYLING APPROACH:
 * - Prefer: <Skeleton className="h-4 w-[250px]" /> (utility classes)
 * - Escape hatch: <Skeleton width={dynamicWidth} height={40} /> (when programmatic)
 *
 * @version 0.0.1
 * @since 0.0.1
 * @author AMBROISE PARK Consulting
 */
const Skeleton = ({ variant = 'text', width, height, lines = 1, show = true, className, animation = 'pulse', style, // Destructure style prop
 }) => {
    if (!show)
        return null;
    const baseStyles = {
        backgroundColor: 'var(--muted)',
        opacity: 'var(--opacity-muted)',
        borderRadius: 'var(--radius)',
        animation: animation === 'pulse' || animation === 'wave'
            ? 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite'
            : 'none',
        ...(animation === 'wave' && {
            background: 'linear-gradient(to right, color-mix(in srgb, var(--muted) 50%, transparent), color-mix(in srgb, var(--muted) 30%, transparent), color-mix(in srgb, var(--muted) 50%, transparent))',
        }),
    };
    const getSkeletonStyles = () => {
        const styles = {};
        if (width) {
            styles.width = typeof width === 'number' ? `${width}px` : width;
        }
        if (height) {
            styles.height = typeof height === 'number' ? `${height}px` : height;
        }
        return styles;
    };
    // Text skeleton with multiple lines
    if (variant === 'text') {
        return (_jsx(Stack, { gap: "tight", children: Array.from({ length: lines }).map((_, index) => (_jsx("div", { className: cn('dndev-skeleton', className), style: {
                    ...baseStyles,
                    height: 'var(--gap-md)',
                    width: index === lines - 1 ? '75%' : '100%',
                    ...getSkeletonStyles(),
                    ...style,
                } }, index))) }));
    }
    // Circular skeleton
    if (variant === 'circular') {
        return (_jsx("div", { className: cn('dndev-skeleton', className), style: {
                ...baseStyles,
                borderRadius: 'var(--radius-full)',
                width: width || height || '40px',
                height: height || width || '40px',
                ...getSkeletonStyles(),
                ...style,
            } }));
    }
    // Rectangular skeleton
    if (variant === 'rectangular') {
        return (_jsx("div", { className: cn('dndev-skeleton', className), style: {
                ...baseStyles,
                width: width || '100%',
                height: height || '200px',
                ...getSkeletonStyles(),
                ...style,
            } }));
    }
    // Rounded skeleton (default)
    return (_jsx("div", { className: cn('dndev-skeleton', className), style: {
            ...baseStyles,
            borderRadius: 'var(--radius-lg)',
            width: width || '100%',
            height: height || '20px',
            ...getSkeletonStyles(),
            ...style,
        } }));
};
/**
 * Text skeleton component
 *
 * @version 0.0.1
 * @since 0.0.1
 * @author AMBROISE PARK Consulting
 */
export const SkeletonText = (props) => _jsx(Skeleton, { variant: "text", ...props });
/**
 * Avatar skeleton component
 *
 * @version 0.0.1
 * @since 0.0.1
 * @author AMBROISE PARK Consulting
 */
export const SkeletonAvatar = ({ size = 40, ...props }) => (_jsx(Skeleton, { variant: "circular", width: size, height: size, ...props }));
/**
 * Image skeleton component
 *
 * @version 0.0.1
 * @since 0.0.1
 * @author AMBROISE PARK Consulting
 */
export const SkeletonImage = ({ aspectRatio = '16/9', width = '100%', ...props }) => (_jsx("div", { style: { aspectRatio }, children: _jsx(Skeleton, { variant: "rectangular", width: width, height: "100%", ...props }) }));
/**
 * Button skeleton component
 *
 * @version 0.0.1
 * @since 0.0.1
 * @author AMBROISE PARK Consulting
 */
export const SkeletonButton = ({ size = 'md', ...props }) => {
    const heightMap = { sm: 32, md: 40, lg: 48 };
    return (_jsx(Skeleton, { variant: "rounded", height: heightMap[size], width: "auto", style: { minWidth: '80px' }, ...props }));
};
/**
 * Card skeleton component
 *
 * @version 0.0.1
 * @since 0.0.1
 * @author AMBROISE PARK Consulting
 */
export const SkeletonCard = ({ showImage = true, showTitle = true, showDescription = true, className, ...props }) => (_jsxs("div", { className: cn('dndev-surface', className), style: {
        display: 'grid',
        gap: 'var(--gap-md)',
        border: '1px solid var(--border)',
        borderRadius: 'var(--radius-lg)',
        padding: 'var(--gap-lg)',
    }, children: [showImage && _jsx(SkeletonImage, { ...props }), _jsxs(Stack, { gap: "tight", children: [showTitle && _jsx(SkeletonText, { lines: 1, ...props }), showDescription && _jsx(SkeletonText, { lines: 2, ...props })] })] }));
/**
 * Table skeleton component
 *
 * @version 0.0.1
 * @since 0.0.1
 * @author AMBROISE PARK Consulting
 */
export const SkeletonTable = ({ rows = 5, columns = 4, ...props }) => (_jsxs(Stack, { gap: "tight", children: [_jsx(Stack, { direction: "row", style: { gap: 'var(--gap-sm)' }, children: Array.from({ length: columns }).map((_, index) => (_jsx(Skeleton, { variant: "rounded", height: 20, style: { flex: 1 }, ...props }, `header-${index}`))) }), Array.from({ length: rows }).map((_, rowIndex) => (_jsx(Stack, { direction: "row", style: { gap: 'var(--gap-sm)' }, children: Array.from({ length: columns }).map((_, colIndex) => (_jsx(Skeleton, { variant: "rounded", height: 16, style: { flex: 1 }, ...props }, `cell-${rowIndex}-${colIndex}`))) }, `row-${rowIndex}`)))] }));
export default Skeleton;
