import { Accordion } from '@/components/controls/Accordion';
import { Container, Section, Stack } from '@/components/layout/LayoutPrimitives';
import { SectionHeader } from '@/components/marketing/SectionHeader';
import { Text } from '@/components/typography/Typography';
import type { HomepageContent } from '@/content/homepage-model';

export function FaqSection({ content }: { content: HomepageContent['faq'] }) {
  return (
    <Section id="faq" tone="muted" aria-label={content.title}>
      <Container width="content">
        <Stack gap="large">
          <SectionHeader eyebrow={content.eyebrow} title={content.title} alignment="center" />
          <Accordion
            items={content.items.map((item, index) => ({
              id: item.id,
              title: item.title,
              content: <Text variant="supporting">{item.body}</Text>,
              open: index === 0,
            }))}
          />
        </Stack>
      </Container>
    </Section>
  );
}
