<template>
	<div class="flex items-center justify-between bg-white py-2 pl-5 pr-3 position">
		<div class="mr-3 flex h-8 w-20 min-w-[160px] items-center color2">
			<text :class="{ 'text-error-text': danger }">{{ lable }}</text>
		</div>
		<div class="flex items-center">
			<slot>
				<span class="max-w-[160px] truncate color">{{ content }}</span>
			</slot>
			<img v-if="arrow" class="ml-1 h-[24px] w-[24px]" :src="back" />
		</div>
		<div class="line"></div>
	</div>
</template>

<script setup lang="ts">
	import back from '@assets/images/profile/back.png'

	type DetailInfoItemProps = {
		lable : string
		content ?: string
		arrow ?: boolean
		danger ?: boolean
	}
	const props = defineProps<DetailInfoItemProps>()
</script>

<style lang="scss" scoped>
	.position {
		position: relative;
		min-height: 3.44rem;
	}

	.line {
		width: 23.4rem;
		height: 1px;
		background-color: #E5E5E5;
		position: absolute;
		bottom: 0;
	}

	.color {
		font-size: 1.04rem;
		color: #737373;
	}

	.color2 {
		font-size: 1.04rem;
		color: #181818;
	}
</style>