'use client';
import { getLanguage } from '@/lib/redux/features/locale';
import { useAppSelector } from '@/lib/redux/hooks';
import { NextIntlClientProvider } from 'next-intl';
import { useState, useEffect } from 'react';

type Props = {
  children: React.ReactNode;
};

export default function IntlProvider({ children }: Props) {
  const locale = useAppSelector(getLanguage);
  const [messages, setMessages] = useState<any>(null);

  useEffect(() => {
    import(`../../messages/${locale}.json`)
      .then((mod) => setMessages(mod.default));
  }, [locale]);

  if (!messages) return null;

  return (
    <NextIntlClientProvider locale={locale} messages={messages}>
      {children}
    </NextIntlClientProvider>
  );
}