---
import Layout from "../layouts/Layout.astro";
import TalkCard from "../components/TalkCard.astro";
import { talks } from "../config/data";
---

<Layout>
    <div class="min-h-screen p-4 sm:p-8">
        <h1
            class="text-3xl sm:text-4xl font-bold text-secondary mb-6 sm:mb-8 text-center"
        >
            Talks
        </h1>
        <div
            class="flex flex-row flex-wrap justify-center gap-4 sm:gap-6 max-w-6xl mx-auto"
        >
            {talks.map((talk) => <TalkCard talk={talk} />)}
        </div>

        {
            talks.length === 0 && (
                <p class="text-center text-gray-500 mt-12">
                    No talks available yet. Check back soon!
                </p>
            )
        }
    </div>
</Layout>