---
import type { LegalSection } from '@/types/site';

interface Props {
    sections: LegalSection[];
}

const { sections } = Astro.props;
---

<div class="space-y-6">
    {
        sections.map((section) => (
            <section class="rounded-[1.5rem] border border-[rgba(17,36,58,0.08)] bg-white/72 p-6 shadow-[var(--shadow-soft)]">
                <h2 class="m-0 text-2xl font-semibold tracking-[-0.03em] text-[var(--color-ink-900)]">
                    {section.title}
                </h2>
                <div class="legal-prose mt-4">
                    {section.body.map((paragraph) => <p>{paragraph}</p>)}
                    {section.bullets && section.bullets.length > 0 && (
                        <ul>
                            {section.bullets.map((bullet) => <li>{bullet}</li>)}
                        </ul>
                    )}
                </div>
            </section>
        ))
    }
</div>