---
import { Icon } from 'astro-icon';

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

export interface Props {
	title?: string;
	subtitle?: string;
	items: Array<Array<Item>>;
}

const {
	title = await Astro.slots.render('title'),
	subtitle = await Astro.slots.render('subtitle'),
	items = [],
} = Astro.props;
---

<div class="px-4 py-16 mx-auto max-w-6xl lg:py-20">
	<div class="max-w-xl sm:mx-auto lg:max-w-2xl">
		<div class="max-w-xl mb-10 md:mx-auto md:text-center lg:max-w-2xl md:mb-12">
			{
				title && (
					<h2
						class="max-w-lg mb-4 text-3xl font-bold leading-none md:tracking-tight sm:text-4xl md:mx-auto font-heading"
						set:html={title}
					/>
				)
			}
			{
				subtitle && (
					<p class="max-w-3xl mx-auto text-xl text-gray-600 dark:text-slate-400" set:html={subtitle} />
				)
			}
		</div>
	</div>
	<div class="max-w-screen-xl sm:mx-auto">
		<div class="grid grid-cols-1 gap-x-8 gap-y-8 lg:gap-x-16 md:grid-cols-2">
			{
				items &&
					items.map((subitems) => (
						<div class="space-y-8">
							{subitems.map(({ question, answer }) => (
								<div>
									<h3 class="mb-4 text-xl font-bold">
										<Icon name="tabler:arrow-down-right" class="w-7 h-7 text-primary-500 inline-block" />
										{question}
									</h3>
									{answer && <div class="text-gray-700 dark:text-gray-400" set:html={answer}></div>}
								</div>
							))}
						</div>
					))
			}
		</div>
	</div>
</div>