// * REACT/INERTIA
import { AppEnv } from "@/types/global";
import { Head as InertiaHead, usePage } from "@inertiajs/react";

interface BreadcrumbItem {
  title: string;
  url: string;
}

type HeadProps = {
  seoTitle?: string;
  seoDescription?: string;
  breadcrumbs?: BreadcrumbItem[];
};

export default function Head({
  seoTitle,
  seoDescription,
  breadcrumbs,
}: Readonly<HeadProps>) {
  const appEnv = usePage().props.appEnv as AppEnv;

  return (
    <InertiaHead>
      <meta charSet="utf-8" />
      <meta httpEquiv="Content-Type" content="text/html; charset=UTF-8" />
      <title>{seoTitle ?? "Ovoteam"}</title>
      {seoTitle && <meta property="og:title" content={seoTitle} />}
      <meta property="og:type" content="website" />
      <meta property="og:url" content={appEnv.url} />
      <meta property="og:site_name" content={appEnv.name} />
      <meta property="og:image" content="" />
      {seoDescription && (
        <>
          <meta property="og:description" content={seoDescription} />
          <meta name="description" content={seoDescription} />
        </>
      )}
      {breadcrumbs && breadcrumbs?.length > 0 && (
        <script type="application/ld+json">
          {JSON.stringify({
            "@context": "https://schema.org",
            "@type": "BreadcrumbList",
            itemListElement: breadcrumbs.map((crumb, index) => ({
              "@type": "ListItem",
              position: index + 1,
              name: crumb.title,
              item: crumb.url,
            })),
          })}
        </script>
      )}
    </InertiaHead>
  );
}