import type { Preview } from '@storybook/svelte-vite';
import StoryStage from './StoryStage.svelte';
import '../src/app/styles/app.css';

const preview: Preview = {
    parameters: {
        layout: 'fullscreen',
        controls: {
            matchers: {
                color: /(background|color)$/i,
                date: /Date$/i,
            },
        },

        a11y: {
            // 'todo' - show a11y violations in the test UI only
            // 'error' - fail CI on a11y violations
            // 'off' - skip a11y checks entirely
            test: 'todo',
        },

        docs: {
            story: {
                // This sets the default height for the iframe in Autodocs
                iframeHeight: '400px',
                // Ensure the story isn't forced into a tiny inline box
                // inline: true,
            },
        },
    },
    decorators: [
        (storyFn, { parameters }) => {
            const { Component, props } = storyFn();
            return {
                Component: StoryStage,
                // We pass the actual story component into the Stage via a snippet/slot
                // Svelte 5 Storybook handles this mapping internally when you return this structure
                props: {
                    children: Component,
                    width: parameters.stageWidth || 'max-w-3xl',
                    ...props,
                },
            };
        },
    ],
};

export default preview;