<script>
export default {
	data() {
		return {
			category_slug: '',
		};
	},
	props: {
		config: {
			type: Object,
			default: () => {
				return {}
			}
		},
	},
	methods: {
		goToToolDetail() {
			if (this.config.slug && this.config.categoryName && this.category_slug) {
				this.$router.push('/detail?tool_slug=' + this.config.slug + '&category_slug=' + this.category_slug + '&category_name=' + this.config.categoryName);
			}
		}
	},
	mounted() {
		this.category_slug = this.$route.query.category_slug;
	},
	watch: {
		'$route': function (newVal) {
			this.category_slug = newVal.query.category_slug;
		},
	}
}
</script>

<template>
	<div class="similar-card-container" @click="goToToolDetail">
		<div class="title">
			<div class="icon">
				<img :src="config.iconUrl || '/'" alt="" />
			</div>
			<span class="title-text">
				{{ config.name || '' }}
			</span>
		</div>
		<div class="text">
			{{ config.memo ? config.memo : '' }}
		</div>
	</div>
</template>

<style scoped lang="scss">
.similar-card-container {
	background: #FFFFFF;
	box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.05);
	border-radius: 8px;
	padding: 16px;
	border: 1px solid #E2E8F0;
	height: 100%;
	box-sizing: border-box;

	&:hover {
		@include gradient-border($linear-gradient-start, $linear-gradient-end);
	}

	&:active {
		opacity: 0.8;
	}

	.title {
		display: flex;
		align-items: center;
		gap: 10px;

		.title-text {
			font-size: 18px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.icon {
			width: 40px;
			height: 40px;
			border-radius: 6px;
			background: #f9fafc;
			padding: 6px;
			img {
				width: 28px;
				height: 28px;
				flex-shrink: 0;
			}
		}

		span {
			color: $main-font-color;
			font-size: $big-font-size;
			font-weight: 600;
			font-family: 'Poppins-SemiBold';
			flex: 1;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	.text {
		color: $grey-color;
		font-family: 'Poppins-Regular';
		margin-top: 4px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
}
</style>
