import type { Preview } from '@storybook/nextjs-vite';
import React from 'react';
import { ThemeProvider } from '../src/contexts/theme-context';
import '../src/app/globals.css';

/**
 * EN: Storybook preview configuration with theme support
 * VI: Cấu hình preview Storybook với hỗ trợ theme
 */
const preview: Preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
    backgrounds: {
      default: 'dark',
      values: [
        {
          name: 'dark',
          value: '#0A0A0A',
        },
        {
          name: 'light',
          value: '#FFFFFF',
        },
      ],
    },
    // EN: Accessibility addon configuration
    // VI: Cấu hình addon accessibility
    a11y: {
      config: {
        rules: [
          {
            id: 'color-contrast',
            enabled: true,
          },
        ],
      },
    },
  },
  // EN: Decorator to wrap all stories with ThemeProvider
  // VI: Decorator để bọc tất cả stories với ThemeProvider
  decorators: [
    (Story) => (
      <ThemeProvider>
        <div style={{ padding: '1rem' }}>
          <Story />
        </div>
      </ThemeProvider>
    ),
  ],
};

export default preview;