import { useMetaData } from '@websolutespa/bom-mixer-hooks';
import { IMetaData, StructuredDataType } from '@websolutespa/bom-mixer-models';
import Head from 'next/head';
import React from 'react';

export function renderStructuredData(data: StructuredDataType): React.ReactElement {
  const structuredData = {
    '@context': 'https://schema.org',
    ...data as {},
  };
  return (
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{
        __html: JSON.stringify(structuredData, null, 2),
      }}
    />
  );
}

export function StructuredData({ item }: { item?: (metaData: IMetaData) => StructuredDataType }) {
  const metaData = useMetaData();
  const structuredData = item ? item(metaData) : metaData.structuredData;
  if (structuredData) {
    return (
      <Head>
        {renderStructuredData(structuredData)}
      </Head>
    );
  }
  return <></>;
}
