<!--
    Component: Providers
    Storybook wrapper that provides required contexts for components.

    Provides:
    - responsive: ResponsiveManager context for breakpoint tracking
    - tooltip: Tooltip.Provider context for shadcn Tooltip components
    - Additional Radix UI providers can be added here as needed
-->
<script lang="ts">
import { createResponsiveManager } from '$shared/lib';
import type { ResponsiveManager } from '$shared/lib';
import { Provider as TooltipProvider } from '$shared/shadcn/ui/tooltip';
import { setContext } from 'svelte';
import type { Snippet } from 'svelte';

interface Props {
    children: Snippet;
    /**
     * Initial viewport width for the responsive context (default: 1280)
     */
    initialWidth?: number;
    /**
     * Initial viewport height for the responsive context (default: 720)
     */
    initialHeight?: number;
    /**
     * Tooltip provider options
     */
    tooltipDelayDuration?: number;
    /**
     * Tooltip skip delay duration
     */
    tooltipSkipDelayDuration?: number;
}

let {
    children,
    initialWidth = 1280,
    initialHeight = 720,
    tooltipDelayDuration = 200,
    tooltipSkipDelayDuration = 300,
}: Props = $props();

// Create a responsive manager with default breakpoints
const responsiveManager = createResponsiveManager();

// Initialize the responsive manager to set up resize listeners
$effect(() => {
    return responsiveManager.init();
});

// Provide the responsive context
setContext<ResponsiveManager>('responsive', responsiveManager);
</script>

<div class="storybook-providers" style:width="100%" style:height="100%">
    <TooltipProvider
        delayDuration={tooltipDelayDuration}
        skipDelayDuration={tooltipSkipDelayDuration}
    >
        {@render children()}
    </TooltipProvider>
</div>
