import type { Decorator } from '@storybook/react'
import React from 'react'

// Define size mappings
const sizes = {
  XS: 360, // Older phones
  M: 768, // Tablets
  XL: 1200, // Desktops
} as const

// Define type for sizes
type SizeKey = keyof typeof sizes

// Function to create a decorator by size, with dark mode support
export const createSizeDecorator = (size: SizeKey): Decorator => {
  const width = sizes[size]

  // eslint-disable-next-line react/display-name
  return (Story, context) => {
    const isDark = context.globals.theme === 'dark'

    React.useEffect(() => {
      const html = document.documentElement
      if (isDark) {
        html.classList.add('dark')
      } else {
        html.classList.remove('dark')
      }
    }, [isDark])

    return (
      <div style={{ width: `${width}px`, padding: '20px' }}>
        <Story />
      </div>
    )
  }
}