import { useEffect } from "react";

interface PageMetaOptions {
  title?: string;
  description?: string;
  ogImage?: string;
}

export function usePageMeta({
  title = "Slices",
  description = "AT Protocol data management platform",
  ogImage,
}: PageMetaOptions = {}) {
  useEffect(() => {
    const fullTitle = title === "Slices" ? title : `${title} — Slices`;
    document.title = fullTitle;

    // Update meta description
    let descMeta = document.querySelector('meta[name="description"]');
    if (!descMeta) {
      descMeta = document.createElement("meta");
      descMeta.setAttribute("name", "description");
      document.head.appendChild(descMeta);
    }
    descMeta.setAttribute("content", description);

    // Update Open Graph tags
    const updateMetaTag = (property: string, content: string) => {
      let meta = document.querySelector(`meta[property="${property}"]`);
      if (!meta) {
        meta = document.createElement("meta");
        meta.setAttribute("property", property);
        document.head.appendChild(meta);
      }
      meta.setAttribute("content", content);
    };

    updateMetaTag("og:type", "website");
    updateMetaTag("og:title", fullTitle);
    updateMetaTag("og:description", description);

    if (ogImage) {
      updateMetaTag("og:image", ogImage);
    }

    updateMetaTag("twitter:card", "summary_large_image");
    updateMetaTag("twitter:title", fullTitle);
    updateMetaTag("twitter:description", description);

    if (ogImage) {
      updateMetaTag("twitter:image", ogImage);
    }
  }, [title, description, ogImage]);
}