<script setup lang="ts">
	import { useI18n } from 'vue-i18n'
	import { useRouter } from 'vue-router'

	const { t } = useI18n({ useScope: 'global' })
	const router = useRouter()

	const handleExplore = () => {
		router.push('/digitalItem')
	}
</script>

<template>
	<div class="wardrobe-empty flex flex-col flex-center">
		<img
			src="@/assets/images/wardrobe/empty-wardrobe.png"
			class="wardrobe-empty__image"
			alt=""
		/>

		<h2 class="wardrobe-empty__title">{{ t('Wardrobe.empty.title') }}</h2>
		<p class="wardrobe-empty__description">
			{{ t('Wardrobe.empty.description') }}
		</p>
		<button class="wardrobe-empty__button" type="button" @click="handleExplore">
			{{ t('Wardrobe.empty.action') }}
		</button>
	</div>
</template>

<style lang="less" scoped>
	.wardrobe-empty {
		flex: 1;
		color: #979797;

		> .wardrobe-empty__image {
			width: 14.2rem;
			height: 18.8rem;
		}

		> .wardrobe-empty__title {
			font-family: 'KaiseiOpti-Bold';
			font-size: 1.6rem;
			margin: 2.4rem 0 0.8rem;
		}

		> .wardrobe-empty__description {
			font-family: 'KaiseiOpti-Regular';
			font-size: 1.4rem;
		}

		> .wardrobe-empty__button {
			margin-top: 3rem;
			height: 4.4rem;
			line-height: 4.4rem;
			padding: 0 3.8rem;
			border: 0.1rem solid #c4c4c4;
			background: #ffffff;
			font-family: 'KaiseiOpti-Regular';
			font-size: 1.6rem;
			text-transform: uppercase;
			color: #585858;
			cursor: pointer;
		}
	}
</style>
