import React from 'react';
import { FaqItem } from 'app/modules/faq/components/faqItem';
import { FaqItems } from '../store/faq.types';
import * as Text from 'app/shared/components/text/text';

interface Props {
  categoryName: string,
  questions: FaqItems[],
}

export const FaqCategory = ({ categoryName, questions }: Props) => {

  return (
    <div id={ categoryName } className="u-margin-top--small">
      <div data-id="faq-category">
        <Text.Headline size='h2' extraClass='u-margin-bottom--none'>{categoryName}</Text.Headline>
      </div>
      <div className="o-gutter-top">
        {questions
          .sort((item1, item2) => item1.position - item2.position)
          .map(question => <FaqItem key={question.id} question={question.question} answer={question.answer} />)
        }
      </div>
    </div>
  );
};