<script lang="ts">
    import type { Snippet } from "svelte";
    import type { HTMLAttributes } from "svelte/elements";

    let {
        dotColor = "#fff",
        dotSize = 1000,
        dotGap = 4,
        dotOpacity = 0.3,
        children,
        class: className = "",
        ...rest
    }: HTMLAttributes<HTMLDivElement> & {
        dotColor?: string;
        dotSize?: number;
        dotGap?: number;
        dotOpacity?: number;
        children?: Snippet;
    } = $props();
</script>

<div {...rest} data-slot="dot-wrapper" class={`dot-wrapper ${className}`}>
    {@render children?.()}

    <div
        aria-hidden="true"
        class="dot-overlay"
        style={`
            opacity: ${dotOpacity};
            mask-image: radial-gradient(
                ${dotSize}px circle at center,
                white,
                transparent
            );
            -webkit-mask-image: radial-gradient(
                ${dotSize}px circle at center,
                white,
                transparent
            );
            background-image: radial-gradient(
                circle,
                ${dotColor} 1px,
                transparent 1px
            );
            background-size: ${dotGap}px ${dotGap}px;
        `}
    ></div>
</div>

<style>
    .dot-wrapper {
        position: relative;
        width: 100%;
        overflow: hidden;
        background: var(--background, transparent);
    }

    .dot-overlay {
        position: absolute;
        inset: 0;
        pointer-events: none;
    }
</style>