import type { Preview } from "@storybook/nextjs-vite";
import "../src/styles/globals.css";

const preview: Preview = {
  parameters: {
    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",
    },

    // Dark theme configuration for Material Dark design system
    backgrounds: {
      default: "dark",
      values: [
        {
          name: "dark",
          value: "#121212",
        },
        {
          name: "elevated",
          value: "#1e1e1e",
        },
        {
          name: "overlay",
          value: "#2c2c2c",
        },
      ],
    },

    docs: {
      story: {
        inline: true,
      },
    },
  },

  // Set default dark background for all stories
  decorators: [
    (Story) => ({
      components: { Story },
      template:
        '<div style="background-color: #121212; min-height: 100vh; padding: 20px;"><Story /></div>',
    }),
  ],
};

export default preview;