<template>
	<div class="wcc-nav-menu">
		<div class="wcc-row wcc-align-center">
			<div class="wcc-col-12">
				<menu-item v-for="(item, index) in menus" :key="index" :data="item" />
			</div>
		</div>
	</div>
</template>

<script>
import MenuItem from "@/components/MenuItem.vue";

export default {
	name: "NavMenu",
	components: {
		MenuItem,
	},
	data() {
		return {
			menus: [
				{
					text: this.$i18n.__("Cookie banner", "webtoffee-cookie-consent"),
					to: {
						name: "customize",
					},
					"data-test-id": "nav-menu-cookie-banner",
				},
				{
					text: this.$i18n.__("Manage cookies", "webtoffee-cookie-consent"),
					to: {
						name: "cookies",
					},
					"data-test-id": "nav-menu-manage-cookies",
				},
				{
					text: this.$i18n.__("Google consent mode", "webtoffee-cookie-consent"),
					to: {
						name: "gcm",
					},
					"data-test-id": "nav-menu-google-consent-mode",
				},
				{
					text: this.$i18n.__("Microsoft consent mode", "webtoffee-cookie-consent"),
					to: {
						name: "mcm",
					},
					"data-test-id": "nav-menu-microsoft-consent-mode",
				},
				{
					text: this.$i18n.__("Consent report", "webtoffee-cookie-consent"),
					to: {
						name: "logs",
					},
					"data-test-id": "nav-menu-consent-report",
				},
				{
					text: this.$i18n.__("Cookie policy", "webtoffee-cookie-consent"),
					to: {
						name: "policies",
					},
					"data-test-id": "nav-menu-cookie-policy",
				},
				{
					text: this.$i18n.__("Languages", "webtoffee-cookie-consent"),
					to: {
						name: "languages",
					},
					"data-test-id": "nav-menu-languages",
				},
				{
					text: this.$i18n.__("Advanced", "webtoffee-cookie-consent"),
					to: {
						name: "advanced",
					},
					"data-test-id": "nav-menu-advanced",
				},
				{
					text: this.$i18n.__("License", "webtoffee-cookie-consent"),
					to: {
						name: "license",
					},
					"data-test-id": "nav-menu-license",
				},
			],
		}; 
	},
};
</script>

<style lang="scss">
.wcc-nav-menu {
	margin-left: -20px;
	margin-right: -20px;
	padding: 0px 20px;
	background: color(mono, white);
	box-shadow: 0 3px 8px -10px #000;
}
</style>