<template>
	<div class="tip-box">
		<span class="iconfont" :class="[`icon-${type}`]"></span>
		<div class="tip">{{ title }}</div>
		<router-link v-if="isShowLink" class="link" to="/">Browse products</router-link>
	</div>
</template>
<script setup lang="ts">
	import { computed, ref } from 'vue'
	const props = defineProps({
		type: {
			default: 'warning',
			type: String as () => 'success' | 'warning'
		},
		title: { default: '', type: String },
		isShowLink: { default: true, type: Boolean }
	})
</script>

<style scoped lang="less">
	.tip-box {
		width: 100%;
		height: 48px;
		background-color: #1565c0;
		border-left: 5px solid rgba(0, 0, 0, 0.2);
		display: flex;
		align-items: center;
		padding: 0 20px;
		> * {
			color: #fff;
			font-size: 16px;
		}
		> .iconfont {
			margin-right: 10px;
			font-size: 18px;
		}
		> .tip {
			flex: 1;
		}
	}
</style>
