<template>
	<footer class="border-t border-neutral-200 dark:border-neutral-800">
		<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
			<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
				<!-- Copyright -->
				<p class="text-sm text-neutral-500 dark:text-neutral-400">
					{{ copyright }}
				</p>

				<!-- Legal Links -->
				<nav v-if="links.length" class="flex flex-wrap gap-6">
					<NuxtLink
						v-for="link in links"
						:key="link.label"
						:to="link.to"
						class="text-sm text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors"
					>
						{{ link.label }}
					</NuxtLink>
				</nav>
			</div>
		</div>
	</footer>
</template>

<script setup>
defineProps({
	/** Copyright text */
	copyright: {
		type: String,
		default: () => `© ${new Date().getFullYear()} All rights reserved.`,
	},
	/** Legal/policy links */
	links: {
		type: Array,
		default: () => [
			{ label: 'Privacy Policy', to: '/privacy' },
			{ label: 'Terms of Service', to: '/terms' },
		],
	},
});
</script>
