import type { ReactNode } from 'react'

import { Elements } from '@stripe/react-stripe-js'
import { loadStripe } from '@stripe/stripe-js'

import { STRIPE_PUBLIC_KEY } from 'config/env'

import { useLexicsStore } from 'features/LexicsStore'

const stripe = loadStripe(STRIPE_PUBLIC_KEY)

type Props = {
  children: ReactNode,
}

export const StripeElements = ({ children }: Props) => {
  const { lang } = useLexicsStore()

  return (
    <Elements
      key={lang}
      stripe={stripe}
      // @ts-expect-error
      options={{ locale: lang }}
    >
      {children}
    </Elements>
  )
}
