<template>
	<div class="welcome">
		<h3 class="title">Welcome to your account page</h3>
		<div class="tip">
			Hi <b>XXX</b>, today is a great day to check your account page. You can check also:
		</div>
		<div class="buttons">
			<router-link class="link" v-for="(v, i) in navs" :key="i" :to="v.path">
				<button custom>
					<span class="iconfont" :class="v.icon"></span>
					<span class="label">{{ v.label }}</span>
				</button>
			</router-link>
		</div>
	</div>
</template>
<script setup lang="ts">
	import { computed, ref } from 'vue'
	const navs = ref([
		{
			path: '/my-account/orders',
			label: 'RECENT ORDERS',
			icon: 'icon-orders'
		},

		{
			path: '/my-account/address',
			label: 'ADDRESSSES',
			icon: 'icon-address'
		},

		{
			path: '/my-account/details',
			label: 'ACCOUNT DETAILS',
			icon: 'icon-tubiao-'
		}
	])
</script>

<style scoped lang="less">
	.welcome {
		> .title {
			font-weight: 600;
			letter-spacing: 2px;
			color: #222222;
			font-size: 24px;
			margin-bottom: 10px;
		}
		> .tip {
			color: #333;
			margin-bottom: 20px;
		}
		> .buttons {
			display: flex;
			align-items: center;
			justify-content: center;
			> .link {
				margin: 0 4px;
				flex: 1;
				text-decoration: none;
			}
		}
	}
</style>
