import { useId } from 'react';
import { cn } from '@/lib/utils';

export function GrowthDashboardBackdrop({ className }: { className?: string }) {
    const patternId = useId();
    const glowId = useId();

    return (
        <svg
            aria-hidden
            className={cn(
                'pointer-events-none absolute inset-0 size-full text-primary',
                className,
            )}
        >
            <defs>
                <pattern
                    id={patternId}
                    width="18"
                    height="18"
                    patternUnits="userSpaceOnUse"
                >
                    <circle
                        cx="1.5"
                        cy="1.5"
                        r="1"
                        fill="currentColor"
                        opacity="0.12"
                    />
                </pattern>
                <radialGradient id={glowId} cx="82%" cy="12%" r="70%">
                    <stop
                        offset="0%"
                        stopColor="currentColor"
                        stopOpacity="0.14"
                    />
                    <stop
                        offset="55%"
                        stopColor="currentColor"
                        stopOpacity="0.04"
                    />
                    <stop
                        offset="100%"
                        stopColor="currentColor"
                        stopOpacity="0"
                    />
                </radialGradient>
            </defs>
            <rect width="100%" height="100%" fill={`url(#${glowId})`} />
            <rect width="100%" height="100%" fill={`url(#${patternId})`} />
        </svg>
    );
}