<template>
	<div
		class="report-btn flex space-between align-center outer"
		:class="{ 'is-cn': isCn }"
		@click="emit('click')"
	>
		<SvgIcon class="light-icon" color="#FFDB56" name="light" size="16" />
		<span>{{ label }}</span>
	</div>
</template>

<script setup lang="ts">
	defineProps<{
		isCn: boolean
		label: string
	}>()

	const emit = defineEmits<{
		(e: 'click'): void
	}>()
</script>

<style lang="less" scoped>
	.report-btn {
		position: absolute;
		bottom: -7.4rem;
		height: 4.4rem;
		border-radius: 2.2rem;
		width: 19.7rem;
		padding: 0 2rem;
		font-size: 1.8rem;
		background-color: #fff;
		border: 1.1px solid #f6f4ef1a;
		cursor: pointer;

		&.outer.is-cn {
			justify-content: center;
			column-gap: 3rem;
		}

		.c-svg {
			width: 1.5rem;
			height: 2rem;
		}
	}
</style>
