import type { Metadata } from 'next';
import { Inter } from 'next/font/google';

import { textControlApi } from '@/shared/language/api/text-control.api';
import { Providers } from '@/shared/providers/providers';
import { makeStore } from '@/shared/store';
import { TextItem } from '@/shared/types/text.types';

import { Footer } from '@/widgets/footer';
import { Header } from '@/widgets/header/ui';

import './globals.css';

const inter = Inter({ subsets: ['latin', 'cyrillic'] });

export const metadata: Metadata = {
  title: 'Ориё - Сеть заправок в Таджикистане',
  description:
    'Качественное топливо, удобное расположение и отличный сервис для наших клиентов',
};

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const store = makeStore();

  const response = await store.dispatch(
    textControlApi.endpoints.fetchText.initiate(),
  );

  return (
    <html
      lang='ru'
      suppressHydrationWarning
      className='scroll-smooth'
      style={{ scrollBehavior: 'smooth' }}
    >
      <body className={`${inter.className} min-w-2xs antialiased`}>
        <Providers textItems={response.data as TextItem[]}>
          <Header />
          {children}
          <Footer />
        </Providers>
      </body>
    </html>
  );
}
