import * as React from 'react'
import type { GlobalProvider } from '@ladle/react'
import { Provider as BasedProvider } from '@based/react'
import { Provider as UIProdiver } from '../src/components/Provider/index.js'
import based from '@based/client'

import '../src/assets/global.css'
import { ThemeProviderProps } from '../src/hooks/useTheme.js'

const client = based({
  org: 'demo',
  project: 'ui',
  env: 'dev2',
})

export const argTypes = {
  background: {
    control: { type: 'background' },
    // options: ['purple', 'blue', 'white', 'pink'],
    defaultValue: 'var(--neutral-inverted-100)',
  },
}

export const Provider: GlobalProvider = ({ children, globalState }) => (
  <BasedProvider client={client}>
    <UIProdiver
      forcedTheme={globalState.theme as ThemeProviderProps['forcedTheme']}
    >
      {children}
    </UIProdiver>
  </BasedProvider>
)
