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

{column.items && column.items.length > 0 && (
    <nav aria-label={column.title} class="space-y-4">
        <h3 class="text-base font-semibold text-gray-900 mb-3">
            {column.title}
        </h3>
        <ul class="space-y-2.5">
            {column.items.map((item) => (
                    <li>
                        <a
                                href={item.href}
                                data-astro-prefetch
                                class={`text-sm flex items-center group transition-colors duration-200 ${
                                    item.isCta
                                        ? 'text-blue-600 font-semibold hover:text-blue-700'
                                        : 'text-gray-600 hover:text-blue-600'
                                }`}
                        >
                            {!item.isCta && (
                                    <span class="w-1.5 h-1.5 bg-transparent group-hover:bg-blue-600 rounded-full mr-2.5 transition-colors duration-200"></span>
                            )}
                            {item.label}
                        </a>
                    </li>
            ))}
        </ul>
    </nav>
)}

<style>
    a {
        transition: all 0.2s ease-in-out;
    }

    a:hover:not([class*="text-blue-"]) {
        transform: translateX(4px);
    }
</style>
