import type { Preview } from "storybook-solidjs-vite";
import "../src/app/styles/global.css";

const preview: Preview = {
	globalTypes: {
		theme: {
			name: "Theme",
			description: "Global theme for components",
			defaultValue: "light",
			toolbar: {
				icon: "mirror",
				items: [
					{ value: "light", title: "Light" },
					{ value: "dark", title: "Dark" },
				],
				dynamicTitle: true,
			},
		},
	},
	decorators: [
		(Story, context) => {
			document.documentElement.dataset.theme = context.globals.theme ?? "light";

			return (
				<div style={{ padding: "16px" }}>
					<Story />
				</div>
			);
		},
	],
	parameters: {
		controls: {
			matchers: {
				color: /(background|color)$/i,
				date: /Date$/i,
			},
		},
		a11y: {
			test: "todo",
		},
	},
};

export default preview;