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

import logoImg from "&/images/global/logo.svg";

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

interface HeadProps {
  title?: string;
  description?: string;
}
interface Ziggy {
  location: string;
}

export default function Head({ title, description }: HeadProps) {
  const appEnv = usePage().props.appEnv as AppEnv;
  const { breadcrumbs } = usePage().props as {
    breadcrumbs?: BreadcrumbItem[];
  };
  const { location } = usePage().props.ziggy as Ziggy;

  const canonical = location.replace("index.php/", "").replace("index.php", "");

  return (
    <InertiaHead>
      <title>{title}</title>
      {description && (
        <>
          <meta name="description" content={description} />
          <meta property="og:description" content={description} />
        </>
      )}
      {title && <meta property="og:title" content={title} />}
      <link rel="canonical" href={canonical} />
      <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={appEnv.url + logoImg} />
      {description && <meta property="og:description" content={description} />}
      {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>
  );
}