---
import siteConfig from '../data/site-config';

const socialLinks = siteConfig.socialLinks || [];
const navLinks = siteConfig.footerNavLinks || [];
---

<footer class="w-full max-w-3xl mx-auto pt-12 pb-10 sm:pt-24 sm:pb-14">
    {
        navLinks.length > 0 && (
            <div class="mb-4 flex flex-wrap gap-x-6 gap-y-1">
                {navLinks.map((link) => (
                    <a class="font-serif hover:underline hover:underline-offset-2" href={link.href}>
                        {link.text}
                    </a>
                ))}
            </div>
        )
    }
    <div
        class:list={[
            'pt-6 flex flex-col gap-4 border-t border-dashed border-main',
            { 'sm:flex-row-reverse sm:justify-between sm:items-center': socialLinks.length > 0 }
        ]}
    >
        {
            socialLinks.length > 0 && (
                <div class="flex flex-wrap gap-x-4 gap-y-1">
                    {socialLinks.map((link) => (
                        <a
                            class="inline-flex items-center justify-center text-sm hover:underline hover:underline-offset-2"
                            href={link.href}
                            target="_blank"
                            rel="noopener noreferer"
                        >
                            {link.text}
                        </a>
                    ))}
                </div>
            )
        }
        <p class="text-sm">
            &copy; {new Date().getFullYear()}&nbsp;<a class="hover:underline hover:underline-offset-2" href="/">{siteConfig.title}</a>. All rights reserved.
        </p>
    </div>
</footer>
