<template>
	<footer class="main-footer">
		<div class="left">
			<span>{{
				$t('MainFooter.Copyright', {
					year: new Date().getFullYear(),
					name: 'Code-Create'
				})
			}}</span>
		</div>
		<div class="right">
			<div v-for="item in nav" :key="item.path">
				<router-link class="link" :to="item.path">{{ $t(item.name) }}</router-link>
			</div>
		</div>
	</footer>
</template>
<script setup lang="ts">
	import { ref, onMounted, onUnmounted, reactive, toRefs } from 'vue'
	const nav = ref([
		{
			name: 'MainFooter.PrivacyPolicy',
			path: '/privacy-policy'
		},
		{
			name: 'MainFooter.TermsOfUse',
			path: '/terms-of-use'
		},
		{
			name: 'MainFooter.Disclaimer',
			path: '/disclaimer'
		},
		{
			name: 'MainFooter.SiteMap',
			path: '/site-map'
		}
	])
</script>
<style lang="less" scoped>
	.main-footer {
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;
		padding: 15px 0;
		min-height: 140px;
		display: flex;
		justify-content: space-between;
		font-family: Poppins, sans-serif;
		> .left {
			font-size: 13px;
			font-weight: normal;
			line-height: 24px;
			color: #000000b3;
		}
		> .right {
			display: flex;
			align-items: flex-start;
			> div {
				display: flex;
				align-items: center;
				justify-content: center;
				padding-left: 20px;
				border-left: 1px solid #0a0a0a;
				margin-left: 20px;
				&:first-child {
					border-left: none;
					padding-left: 0;
					margin-left: 0;
				}
				> .link {
					font-weight: 400;
					font-size: 12px;
					transition: all 0.2s ease-out;
					box-sizing: border-box;
					box-shadow: none;
					text-decoration: none;
					display: inline-block;
					color: #0a0a0a;
				}
			}
		}
		@media (max-width: 800px) {
			min-height: 155px;
			padding: 20px 14px 18px;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 28px;

			> .left {
				order: 1;
				font-size: 11px;
				line-height: 1.4;
			}

			> .right {
				order: 2;
				width: 100%;
				justify-content: space-around;
				gap: 10px;
				> div {
					border-left: none;
					margin-left: 0;
					padding-left: 0;

					> .link {
						font-size: 11px;
						line-height: 1.4;
						white-space: nowrap;
					}
				}
			}
		}
	}
</style>
