import type { Preview } from '@storybook/vue3-vite'
import '@nychthemeron/library/theme'

const preview: Preview = {
  parameters: {
    layout: 'centered',
    toolbar: {
      theme: {
        items: [
          { value: 'hades', title: 'Dark (Hades)', left: '🌙' },
          { value: 'apollo', title: 'Light (Apollo)', left: '☀️' },
        ],
        dynamicTitle: true,
      },
    },
    docs: {
      description: {
        component: 'Component documentation',
      },
    },
  },
  decorators: [
    (story, context) => {
      const theme = context.globals.theme || 'hades'

      return {
        setup() {
          document.documentElement.setAttribute('data-theme', theme)
        },
        components: { story },
        template: '<story />',
      }
    },
  ],
  globalTypes: {
    theme: {
      name: 'Theme',
      description: 'Global theme for all components',
      defaultValue: 'hades',
      toolbar: {
        icon: 'paintbrush',
        items: [
          { value: 'hades', title: 'Dark (Hades)' },
          { value: 'apollo', title: 'Light (Apollo)' },
        ],
        dynamicTitle: true,
      },
    },
  },
}

export default preview