<template>
	<div class="item flex items-center">
		<div class="icon flex items-center justify-center">
			<img :src="item.iconUrl || ''" alt="" />
		</div>
		<div class="text">{{ item.name || '' }}</div>
	</div>
</template>

<script>
export default {
	props: {
		item: {
			type: Object,
			default: () => {
				return {}
			}
		},
	},
	data() {
		return {
		}
	},
	methods: {}
}
</script>

<style scoped lang="scss">
.item {
	border-radius: 12px;
	padding: 14px 10px;
	gap: 16px;
	margin-bottom: 6px;
	color: #64748B;
	font-size: 18px;
	font-family: 'Poppins-Medium', serif;
	.icon {
		width: 24px;
		height: 24px;
		border-radius: 4px;
		box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.08);
		img {
			width: 14px;
			height: 14px;
		}
	}
	&:hover {
		background-color: #f5f5f5;
		color: #7B61FF;
	}
}
</style>
