<script setup lang="ts">
	import { useRouter } from 'vue-router'
	const router = useRouter()

	defineProps({
		title: { type: String, default: 'STYLING ANGEL' }
	})

	defineEmits(['clickReturn'])

	const handleClickReturn = () => {
		router.back()
		// emit('clickReturn')
	}
</script>

<template>
	<div class="header-title">
		<div class="return" @click="handleClickReturn"><SvgIcon name="return" size="34" /></div>
		<span class="title">{{ title }}</span>
	</div>
</template>

<style scoped lang="less">
	.header-title {
		width: 100%;
		height: var(--header-title-height, 9.9rem);
		background-color: var(--header-title-background, #000000);
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		> .return {
			position: absolute;
			left: 3.2rem;
			display: inline-block;
			--svg-icon-color: var(--header-title-color, #ffffff);
		}
		> .title {
			font-size: 4.8rem;
			color: var(--header-title-color, #ffffff);
			font-family: 'boskaRegular';
		}
	}
</style>
