import { jsx } from 'react/jsx-runtime';
import { cn } from '../../../utils/cn.js';
import 'react';

/**
 * GlassEffect component creates a layered glass morphism effect
 * Uses hardcoded gradients for consistent visibility on light backgrounds
 *
 * @example
 * ```tsx
 * <div className="relative overflow-hidden bg-blue-500 rounded-lg">
 *   <GlassEffect rounded="var(--button-radius)" />
 *   <span className="relative z-10">Content</span>
 * </div>
 * ```
 */
const GlassEffect = ({ rounded = 'inherit', blendModeOuter = 'normal', blendModeInner = 'normal', gradientOuter, gradientInner, classNameOuter, classNameInner, zIndex = 0, }) => {
    // Calculate inner border radius (slightly smaller than outer)
    const innerRoundedCalc = rounded === 'inherit'
        ? 'inherit'
        : `calc(${rounded} - 1.5px)`;
    // Default gradients with visible contrast on light backgrounds
    const defaultGradientOuter = 'linear-gradient(to bottom, #ffffff 0%, #e5e7eb 40%,  #ffffff 100%)';
    const defaultGradientInner = 'linear-gradient(to bottom, #edeff0 0%, #ffffff 100%)';
    return (jsx("div", { className: cn("absolute inset-0 p-[1.5px] border-[1px] border-[var(--color-border)]", "pointer-events-none", // Don't block clicks
        classNameOuter), style: {
            borderRadius: rounded,
            zIndex,
            mixBlendMode: blendModeOuter,
            background: gradientOuter || defaultGradientOuter,
        }, children: jsx("div", { className: cn("w-full h-full", classNameInner), style: {
                borderRadius: innerRoundedCalc,
                mixBlendMode: blendModeInner,
                background: gradientInner || defaultGradientInner,
            } }) }));
};

export { GlassEffect };
