import React from 'react';
import { JsonLd } from 'react-schemaorg';
import ReactDOM from 'react-dom/server';

import Accordion from './Accordion';
import Container from '../shared/Container';
import { MoreFaq } from '../../styles/components/main/FAQ.style';
import { PrismicLink } from 'easy-prismic-react';
import PrismicLinkComponent from '../PrismicLink';

interface Props {
  title: string;
  items: { title: string; answer: JSX.Element }[];
  link: PrismicLink;
}

export const FAQ: React.FC<Props> = ({ title, items, link }) => {
  function JSONLD(): React.ReactElement {
    const Schema: any = JsonLd; // Suppress warning
    return (
      <Schema
        item={{
          '@context': 'https://schema.org',
          '@type': 'FAQPage',
          mainEntity: items.map(({ title, answer }) => ({
              '@type': 'Question',
              name: title,
              acceptedAnswer: {
                '@type': 'Answer',
                text:ReactDOM.renderToString(answer).replace(/<[^>]*>?/gm, '')
              }
            }))
        }}
      />
    );
  }

  return (
    <>
      <Container>
        <h2 className="mb">{title}</h2>
        <Accordion items={items} />
        <MoreFaq>
          <PrismicLinkComponent link={link}>
            Accéder à la Foire aux Questions
            <i className="fas fa-plus" />
          </PrismicLinkComponent>
        </MoreFaq>
      </Container>
      {JSONLD()}
    </>
  );
};

export default FAQ;