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

    let {
        blockSize = 20,
        blockColor = "#777",
        backgroundColor = "#222",
        children,
        class: className = "",
        style = "",
        ...rest
    }: HTMLAttributes<HTMLDivElement> & {
        blockSize?: number;
        blockColor?: string;
        backgroundColor?: string;
        children?: Snippet;
    } = $props();

    const half = $derived(blockSize / 2);
</script>

<div
    {...rest}
    data-slot="checkerboard"
    class={`checkerboard ${className}`}
    style={`
        background-image:
            linear-gradient(45deg, ${blockColor} 25%, transparent 25%),
            linear-gradient(-45deg, ${blockColor} 25%, transparent 25%),
            linear-gradient(45deg, transparent 75%, ${blockColor} 75%),
            linear-gradient(-45deg, transparent 75%, ${blockColor} 75%);
        background-size: ${blockSize}px ${blockSize}px;
        background-position:
            0 0,
            0 ${half}px,
            ${half}px -${half}px,
            -${half}px 0;
        background-color: ${backgroundColor};
        ${style}
    `}
>
    {@render children?.()}
</div>

<style>
    .checkerboard {
        min-height: 100px;
        overflow: hidden;
    }
</style>