interface FAQItem {
  q: string;
  a: string;
}

interface BlogJsonLdProps {
  title: string;
  description: string;
  datePublished: string;
  image: string;
  slug: string;
  faqItems: readonly FAQItem[] | FAQItem[];
}

export function BlogJsonLd({
  title,
  description,
  datePublished,
  image,
  slug,
  faqItems,
}: BlogJsonLdProps) {
  const baseUrl = "https://designshare.net";
  const url = `${baseUrl}/blog/${slug}`;
  const imageUrl = `${baseUrl}${image}`;

  const articleSchema = {
    "@context": "https://schema.org",
    "@type": "Article",
    headline: title,
    description,
    datePublished,
    dateModified: datePublished,
    url,
    image: imageUrl,
    author: {
      "@type": "Organization",
      name: "The DesignShare Team",
      url: "https://eleganttechbd.com/",
    },
    publisher: {
      "@type": "Organization",
      name: "DesignShare",
      url: baseUrl,
      logo: {
        "@type": "ImageObject",
        url: `${baseUrl}/assets/og-image.png`,
      },
    },
    mainEntityOfPage: {
      "@type": "WebPage",
      "@id": url,
    },
  };

  const faqSchema = {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    mainEntity: faqItems.map((item) => ({
      "@type": "Question",
      name: item.q,
      acceptedAnswer: {
        "@type": "Answer",
        text: item.a,
      },
    })),
  };

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(articleSchema) }}
      />
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(faqSchema) }}
      />
    </>
  );
}