'use client'

import { Thing, WithContext } from 'schema-dts'

interface StructuredDataProps {
  data: WithContext<Thing> | any
  id?: string
}

/**
 * StructuredData component for rendering JSON-LD
 * Sanitizes output to prevent XSS attacks by replacing < with \u003c
 */
export default function StructuredData({ data, id }: StructuredDataProps) {
  return (
    <script
      id={id || 'structured-data'}
      type="application/ld+json"
      dangerouslySetInnerHTML={{
        __html: JSON.stringify(data).replace(/</g, '\\u003c')
      }}
    />
  )
}

// Utility component for multiple structured data objects
interface MultipleStructuredDataProps {
  dataArray: Array<WithContext<Thing> | any>
  idPrefix?: string
}

export function MultipleStructuredData({ dataArray, idPrefix = 'structured-data' }: MultipleStructuredDataProps) {
  return (
    <>
      {dataArray.map((data, index) => (
        <StructuredData
          key={`${idPrefix}-${index}`}
          id={`${idPrefix}-${index}`}
          data={data}
        />
      ))}
    </>
  )
}