starr-philproperties/src/contexts/MetadataContext.jsx

import { createContext, useContext, useMemo } from "react";
import { Helmet } from "react-helmet-async";
import { useLocation } from "react-router-dom";

const MetadataContext = createContext(null);

const DEFAULT_METADATA = {
  title: "STARR | Philproperties",
  description: "This is still in development phase. Come back soon.",
  keywords: "philproperties, online courses, sales training",

  // Open Graph
  ogType: "website",
  ogImage:
    "https://95306gu5u4.ufs.sh/f/uBRuoG2BEPFD7KSEgHPf2HyENZzXqhfcGpQsYtIMT9F5RWUC",

  // Twitter
  twitterCard: "summary_large_image",
  twitterImage:
    "https://95306gu5u4.ufs.sh/f/uBRuoG2BEPFD7KSEgHPf2HyENZzXqhfcGpQsYtIMT9F5RWUC",
};

export function MetadataProvider({ children, value }) {
  const location = useLocation();

  const metadata = useMemo(
    () => ({ ...DEFAULT_METADATA, ...value }),
    [value]
  );

  const url =
    typeof window !== "undefined"
      ? `${window.location.origin}${location.pathname}`
      : "";

  return (
    <MetadataContext.Provider value={metadata}>
      <Helmet key={location.pathname}>
        {/* Basic SEO */}
        <title>{metadata.title}</title>
        <meta name="description" content={metadata.description} />
        <meta name="keywords" content={metadata.keywords} />

        {/* Open Graph */}
        <meta property="og:title" content={metadata.ogTitle ?? metadata.title} />
        <meta
          property="og:description"
          content={metadata.ogDescription ?? metadata.description}
        />
        <meta property="og:type" content={metadata.ogType} />
        <meta property="og:url" content={url} />
        {metadata.ogImage && (
          <meta property="og:image" content={metadata.ogImage} />
        )}

        {/* Twitter */}
        <meta name="twitter:card" content={metadata.twitterCard} />
        <meta
          name="twitter:title"
          content={metadata.twitterTitle ?? metadata.title}
        />
        <meta
          name="twitter:description"
          content={metadata.twitterDescription ?? metadata.description}
        />
        {metadata.twitterImage && (
          <meta name="twitter:image" content={metadata.twitterImage} />
        )}
      </Helmet>

      {children}
    </MetadataContext.Provider>
  );
}

export function useMetadata() {
  const ctx = useContext(MetadataContext);
  if (!ctx) {
    throw new Error("useMetadata must be used within MetadataProvider");
  }
  return ctx;
}