import useLocale, { Locales } from '@/utils/useLocale';
import { Html, Head, Main, NextScript, DocumentProps } from 'next/document';
import { useRouter } from 'next/router';
import { LocalesMap } from '@/utils/useLocale';

export const locales: LocalesMap = {
  ru: {
    title: 'ridebus - расписание транспорта',
    description: 'Приложение, которое поможет вам удобно смотреть расписание общественного транспорта',
  },
  en: {
    title: 'ridebus - public transport schedule',
    description: 'An app that helps you conveniently view public transportation schedules',
  },
};

export default function Document(props: DocumentProps) {
  const locale = props.locale || 'en';

  const t = (key: string) => locales[locale as Locales][key] || key;

  return (
    <Html>
      <Head>
        <link rel="shortcut icon" type="image/ico" href="/favicon.ico" />

        {/* Primary Meta Tags */}
        <meta name="title" content="ridebus - budget manager" />
        <meta
          name="description"
          content="An app that helps you conveniently view public transportation schedules"
        />

        {/* Open Graph */}
        <meta property="og:type" content="website" />
        <meta property="og:url" content="https://ridebus.by/" />
        <meta property="og:title" content={t('title')} />
        <meta property="og:description" content={t('description')} />
        <meta
          property="og:image"
          content={`https://ridebus.by/images/share-banner-${locale}.png`}
        />

        {/* Twitter */}
        <meta property="twitter:card" content="summary_large_image" />
        <meta property="twitter:url" content="https://ridebus.by/" />
        <meta property="twitter:title" content={t('title')} />
        <meta property="twitter:description" content={t('description')} />
        <meta
          property="twitter:image"
          content={`https://ridebus.by/images/share-banner-${locale}.png`}
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}