---
import type { CollectionEntry } from 'astro:content';

interface Props {
	faq: CollectionEntry<'faq'>;
	open?: boolean;
}

const { faq, open = false } = Astro.props;
const { Content } = await faq.render();
---

<details class="faq-item group" open={open}>
	<summary class="faq-question">
		<span class="question-text">{faq.data.question}</span>
		<svg
			class="chevron"
			width="20"
			height="20"
			viewBox="0 0 20 20"
			fill="none"
			xmlns="http://www.w3.org/2000/svg"
		>
			<path
				d="M5 7.5L10 12.5L15 7.5"
				stroke="currentColor"
				stroke-width="2"
				stroke-linecap="round"
				stroke-linejoin="round"></path>
		</svg>
	</summary>
	<div class="faq-answer">
		<Content />
	</div>
</details>

<style>
	.faq-item {
		@apply overflow-hidden rounded-xl border border-dark-border bg-dark-elevated transition-all duration-200;
	}

	.faq-item:hover {
		@apply border-border-hover;
	}

	.faq-question {
		@apply flex w-full cursor-pointer select-none items-center justify-between p-6 text-left;
		@apply text-lg font-medium text-gray-100;
	}

	.faq-question:hover {
		@apply text-primary;
	}

	.chevron {
		@apply ml-4 flex-shrink-0 text-gray-400 transition-transform duration-200;
	}

	.group[open] .chevron {
		@apply rotate-180;
	}

	.faq-answer {
		@apply prose prose-invert max-w-none px-6 pb-6 text-gray-300;
	}

	/* Markdown content styling */
	.faq-answer :global(h2) {
		@apply mb-3 mt-6 text-xl font-semibold text-gray-100;
	}

	.faq-answer :global(h3) {
		@apply mb-2 mt-4 text-lg font-semibold text-gray-200;
	}

	.faq-answer :global(p) {
		@apply mb-4 leading-relaxed;
	}

	.faq-answer :global(ul),
	.faq-answer :global(ol) {
		@apply mb-4 space-y-2 pl-6;
	}

	.faq-answer :global(li) {
		@apply leading-relaxed;
	}

	.faq-answer :global(strong) {
		@apply font-semibold text-gray-100;
	}

	.faq-answer :global(a) {
		@apply text-primary hover:underline;
	}

	.faq-answer :global(code) {
		@apply rounded bg-dark-bg px-1.5 py-0.5 font-mono text-sm text-primary;
	}

	.faq-answer :global(pre) {
		@apply my-4 overflow-x-auto rounded-lg bg-dark-bg p-4;
	}

	.faq-answer :global(table) {
		@apply my-4 w-full border-collapse;
	}

	.faq-answer :global(th) {
		@apply border border-dark-border bg-dark-bg p-3 text-left font-semibold text-gray-100;
	}

	.faq-answer :global(td) {
		@apply border border-dark-border p-3;
	}

	.faq-answer :global(blockquote) {
		@apply my-4 border-l-4 border-primary pl-4 italic text-gray-400;
	}
</style>
