import React from 'react';

type EmulatedCrossBackgroundProps = {
    gap?: number;          // distance between cross centers
    size?: number;         // arm length of each cross
    opacity?: number;      // overall opacity
    lineColor?: string;    // stroke color
    strokeWidth?: number;  // thickness of cross lines
    className?: string;
};

export const EmulatedCrossBackground: React.FC<EmulatedCrossBackgroundProps> = ({
                                                                                    gap = 25,
                                                                                    size = 8,
                                                                                    opacity = 0.8,
                                                                                    lineColor = 'rgba(0,0,0,0.15)',
                                                                                    strokeWidth = 1,
                                                                                    className = ''
                                                                                }) => {
    const arm = Math.min(size, gap); // prevent overflow
    const half = gap / 2;
    const armOffset = arm / 2;

    const svg = encodeURIComponent(
        `<svg xmlns="http://www.w3.org/2000/svg" width="${gap}" height="${gap}" viewBox="0 0 ${gap} ${gap}">
      <g stroke="${lineColor}" stroke-width="${strokeWidth}" stroke-linecap="square">
        <line x1="${half - armOffset}" y1="${half}" x2="${half + armOffset}" y2="${half}" />
        <line x1="${half}" y1="${half - armOffset}" x2="${half}" y2="${half + armOffset}" />
      </g>
    </svg>`
    );

    return (
        <div
            className={`pointer-events-none absolute inset-0 ${className}`}
            style={{
                opacity,
                backgroundImage: `url("data:image/svg+xml,${svg}")`,
                backgroundRepeat: 'repeat',
                backgroundSize: `${gap}px ${gap}px`,
                backgroundColor: 'transparent'
            }}
        />
    );
};

export const SolidOverlayGradient = ({leftOffset, rightOffset}) => {
    // Narrower white center with a wider patterned edge: fractions control transparency vs white.
    const edgeVisibleFraction = 0.35 // portion of each sidebar offset kept fully transparent (pattern visible)
    const fadeFraction = 0.35       // portion (relative to offset) used to fade into white
    const minFadePx = 80            // minimum fade length to avoid harsh edges

// Left side calculations
    const leftTransparentEnd = Math.min(leftOffset, leftOffset * edgeVisibleFraction)
    const leftFadeLen = Math.max(minFadePx, leftOffset * fadeFraction)
    const leftFadeEnd = Math.min(leftOffset, leftTransparentEnd + leftFadeLen)

// Right side calculations
    const rightTransparentEnd = Math.min(rightOffset, rightOffset * edgeVisibleFraction)
    const rightFadeLen = Math.max(minFadePx, rightOffset * fadeFraction)
    const rightFadeEnd = Math.min(rightOffset, rightTransparentEnd + rightFadeLen)

    const overlayGradient = `linear-gradient(to right,
        rgba(255,255,255,0) 0px,
        rgba(255,255,255,0) ${leftTransparentEnd}px,
        rgba(255,255,255,0.65) ${leftTransparentEnd + (leftFadeLen * 0.85)}px,
        #ffffff ${leftFadeEnd}px,
        #ffffff calc(100% - ${rightFadeEnd}px),
        rgba(255,255,255,0.65) calc(100% - ${rightTransparentEnd + (rightFadeLen * 0.85)}px),
        rgba(255,255,255,0) calc(100% - ${rightTransparentEnd}px),
        rgba(255,255,255,0) 100%)`

    return <div className={'pointer-events-none absolute inset-0 z-10'} style={{background: overlayGradient}}/>
};