"use client";

import { createLocaleFunction } from "@/components/server-locale";
import { useUrl } from "@/hooks/use-url";
import { getLocaleOrigin, type Locale, locales } from "@/lib/locale";

export function SeoScripts({ locale }: { locale: Locale }) {
  let url = useUrl();
  const t = createLocaleFunction(locale);

  url = url === "/" ? "" : url;

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify({
            "@context": "https://schema.org",
            "@type": "WebSite",
            name: t("home.seo.title"),
            alternateName: [
              t("home.seo.title"),
              "TiDB Hands-on Labs",
              getLocaleOrigin(locale).replace(/^https?:\/\//, ""),
            ],
            url: getLocaleOrigin(locale) + url,
            inLanguage: [
              locales.includes("ja") && {
                "@type": "Language",
                name: "Japanese",
                url: "https://labs.tidb.io/ja" + url,
              },
              locales.includes("ko") && {
                "@type": "Language",
                name: "Korean",
                url: "https://labs.tidb.io/ko" + url,
              },
              locales.includes("en") && {
                "@type": "Language",
                name: "English",
                url: "https://labs.tidb.io" + url,
              },
              locales.includes("zh") && {
                "@type": "Language",
                name: "Chinese",
                url: "https://labs.pingcap.com" + url,
              },
            ].filter(Boolean),
          }),
        }}
      />
    </>
  );
}