<template>
	<div class="sc-list-null">
		<img v-if="nullImage === 'shopping-cart'" src="@/assets/images/shopping-cart-null.png" />
		<img v-else-if="nullImage === 'brand'" src="@/assets/images/brand-null.png" />
		<div class="title">{{ title }}</div>
		<div class="tip">{{ tip }}</div>
		<button custom v-show="showButton" @click="handleClick">
			{{ buttonText || $t('ShoppingCart.exploreDigitalItems') }}
		</button>
	</div>
</template>

<script setup lang="ts">
	import { computed, ref, onMounted } from 'vue'
	const props = defineProps({
		nullImage: { type: String as () => 'shopping-cart' | 'brand', default: 'shopping-cart' },
		title: { type: String, default: '' },
		tip: { type: String, default: '' },
		showButton: { type: Boolean, default: true },
		buttonText: { type: String, default: '' }
	})
	const emit = defineEmits(['explore'])
	const handleClick = () => {
		emit('explore')
	}
</script>

<style lang="less" scoped>
	.sc-list-null {
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		text-align: center;
		> img {
			width: 14rem;
			height: auto;
			margin-bottom: 2.4rem;
		}
		> .title {
			font-family: KaiseiOpti-Bold;
			font-size: 1.6rem;
			line-height: 2.4rem;
			color: #979797;
			margin-bottom: 0.8rem;
		}
		> .tip {
			width: 50%;
			font-family: KaiseiOpti-Regular;
			font-size: 1.4rem;
			line-height: 2.4rem;
			color: #979797;
		}
		> button {
			min-width: 30rem;
			height: 4.4rem;
			border: 0.1rem solid #c4c4c4;
			font-family: KaiseiOpti-Medium;
			font-size: 1.6rem;
			color: #979797;
			margin-top: 3rem;
			text-transform: uppercase;
		}
	}
</style>