import type { Metadata, Viewport } from 'next';
import { Indie_Flower, M_PLUS_Rounded_1c } from 'next/font/google';
import type { ReactNode } from 'react';

import { I18nProvider } from '@/components/I18nProvider';

import 'semantic-ui-css/semantic.min.css';
import './globals.css';

const indieFlower = Indie_Flower({
  weight: '400',
  subsets: ['latin'],
  variable: '--font-indie',
  display: 'swap',
});

const mPlusRounded = M_PLUS_Rounded_1c({
  weight: ['400', '700'],
  subsets: ['latin'],
  variable: '--font-mplus',
  display: 'swap',
  adjustFontFallback: false,
});

export const metadata: Metadata = {
  title: 'キャサリン faito crab',
  description: 'キャサリン faito crab',
  manifest: '/manifest.json',
};

export const viewport: Viewport = {
  themeColor: '#ff2d7c',
};

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="ja" className={`${indieFlower.variable} ${mPlusRounded.variable}`}>
      <body>
        <I18nProvider>{children}</I18nProvider>
      </body>
    </html>
  );
}
