---
interface Props {
  title?: string;
  description?: string;
  image?: string;
}

import { metaData } from "../config";
import { SEO } from "astro-seo";
import { JoyUIRootIsland } from "./Components"
import { useHtmlThemeAttr } from "../hooks/useHtmlThemeAttr"; 
import { usePrimeReactThemeSwitcher } from "../hooks/usePrimeReactThemeSwitcher";

const { title, description, image } = Astro.props;

const { url } = Astro;

const shareTitle = title ? `${title} | ${metaData.title}` : metaData.shareTitle ?? metaData.title;
const shareDescription = description ?? metaData.shareDescription ?? metaData.description;
const canonicalUrl = url?.href ?? metaData.baseUrl;
const shareImage = new URL(image ?? metaData.ogImage, metaData.baseUrl).toString();
const shareImageAlt = metaData.shareImageAlt ?? metaData.shareTitle ?? metaData.title;

---

<SEO
  title={shareTitle}
  titleTemplate=`%s | ${metaData.title}`
  titleDefault={metaData.title}
  description={shareDescription}
  charset="UTF-8"
  openGraph={{
    basic: {
      title: shareTitle,
      type: "website",
      image: shareImage,
      url: canonicalUrl,
    },
    optional: {
      description: shareDescription,
      siteName: metaData.name,
      locale: "en_US",
    },
  }}
  extend={{
    link: [
      { rel: "icon", href: "https://codey.lol/images/favicon.png" },
      { rel: "canonical", href: canonicalUrl },
    ],
    meta: [
      { property: "og:image:alt", content: shareImageAlt },
      { name: "twitter:card", content: "summary_large_image" },
      { name: "twitter:title", content: shareTitle },
      { name: "twitter:description", content: shareDescription },
      { name: "twitter:image", content: shareImage },
      { name: "twitter:image:alt", content: shareImageAlt },
    ],
  }}
/>