import type { ReactNode } from 'react'

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

import { STRIPE_PUBLIC_KEY } from 'config/env'

import { useLexicsStore } from 'features/LexicsStore'

type Props = {
  children: ReactNode,
}

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

  const stripe = loadStripe(STRIPE_PUBLIC_KEY, {
    locale: lang as StripeElementLocale,
  })

  return (
    <Elements
      key={lang}
      stripe={stripe}
      options={{ locale: lang as StripeElementLocale }}
    >
      {children}
    </Elements>
  )
}