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

import {
  fetchMediaContent,
  fetchTextContent,
} from '@/features/pages/services/pages.service';

import { Providers } from '@/shared/providers/providers';
import { MediaItem } from '@/shared/types/media.type';
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: {
    template: '%s | Ориё - Сеть заправок в Таджикистане',
    default: 'Ориё - Сеть заправок в Таджикистане',
  },
  description:
    'Качественное топливо, удобное расположение и отличный сервис для наших клиентов',
};

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  // Fetch texts and media using TaylorDB query builder
  const [textItems, mediaItems] = await Promise.all([
    fetchTextContent(),
    fetchMediaContent(),
  ]);
  return (
    <html
      lang='ru'
      suppressHydrationWarning
      className='scroll-smooth'
      style={{ scrollBehavior: 'smooth' }}
    >
      <body className={`${inter.className} min-w-2xs antialiased`}>
        <Providers
          textItems={textItems as TextItem[]}
          mediaItems={mediaItems as MediaItem[]}
        >
          <Header />
          {children}
          <Footer />
        </Providers>
      </body>
    </html>
  );
}
