import React from 'react';
import { Section } from '@/ui/Section';
import { Container } from '@/ui/Container';
import { Heading } from '@/ui/Heading';
import { Text } from '@/ui/Text';
import { Accordion } from '@/components/shared/Accordion';
import { CardStack } from '@/ui/CardStack';
import { Center } from '@/ui/Center';

interface FAQItem {
  question: string;
  answer: string;
}

interface FAQSectionProps {
  title: string;
  subtitle: string;
  faqs: FAQItem[];
}

/**
 * FAQSection - A semantic component for the FAQ section.
 */
export function FAQSection({
  title,
  subtitle,
  faqs,
}: FAQSectionProps) {
  return (
    <Section variant="dark" padding="lg">
      <Container size="md">
        <Center>
          <CardStack gap={4}>
            <Center>
              <Text size="xs" weight="bold" variant="primary" uppercase letterSpacing="widest">
                {subtitle}
              </Text>
            </Center>
            <Heading level={2} weight="bold" align="center">
              {title}
            </Heading>
          </CardStack>
        </Center>

        <CardStack gap={4}>
          {faqs.map((faq, index) => (
            <Accordion key={index} title={faq.question}>
              <Text size="sm" variant="low" leading="relaxed">
                {faq.answer}
              </Text>
            </Accordion>
          ))}
        </CardStack>
      </Container>
    </Section>
  );
}