Realtime
edge config +
feature flagsfor
Web, Mobile& IOT

/**
 * v0 by Vercel.
 * @see https://v0.dev/t/q78qlbK
 */
import {
  AccordionTrigger,
  AccordionContent,
  AccordionItem,
  Accordion,
} from '@/components/ui/accordion'
import { Section } from '@/components/section'
import type { FAQ as FAQType } from 'contentlayer/generated'
import { FAQPageJsonLd } from 'next-seo'

export interface IFaqProps extends FAQType {}

export const FAQ: React.FC<IFaqProps> = ({
  title,
  description,
  items = [],
}) => {
  return (
    <>
      <Section title={title} description={description}>
        <div className="mx-auto max-w-3xl text-left">
          <Accordion className="mt-4 w-full" type="multiple">
            {items?.map(({ question, answer }, index) => (
              <AccordionItem key={index} value={index.toString()}>
                <AccordionTrigger className="hover:underline-none">
                  {question}
                </AccordionTrigger>
                <AccordionContent>{answer}</AccordionContent>
              </AccordionItem>
            ))}
          </Accordion>
        </div>
      </Section>

      <FAQPageJsonLd
        useAppDir
        mainEntity={items.map(
          ({ question: questionName, answer: acceptedAnswerText }) => ({
            questionName,
            acceptedAnswerText,
          }),
        )}
      />
    </>
  )
}