<script lang="ts">
	import { IconArrowNarrowRight } from '@tabler/icons-svelte';
	export let feature: {
		routeName: string;
		routeId: string;
		entryPoint: string;
	};
</script>

<div class="link-wrapper">
	<a href="/map/{feature.routeId}#{feature.entryPoint}" class="wide-button">
		<div class="content">
			<div class="header-row">
				<span class="sub-text">Go to</span>
				<span class="route-id-chip">{feature.routeId}</span>
			</div>
			<span class="main-text">{feature.routeName}</span>
		</div>

		<div class="icon-circle">
			<IconArrowNarrowRight />
		</div>
	</a>
</div>

<style>
	.link-wrapper {
		padding: 16px;
		width: 100%;
		box-sizing: border-box;
	}

	.wide-button {
		display: flex;
		align-items: center;
		background: #ffffff;
		border: 1px solid #e2e8f0;
		border-radius: 16px;
		text-decoration: none;
		padding: 12px 16px;
		transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	}

	.content {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 4px;
		min-width: 0;
	}

	.header-row {
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.sub-text {
		font-size: 0.65rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		font-family: 'urwgothic';
		color: #64748b;
	}

	.route-id-chip {
		font-size: 0.6rem;
		font-weight: 800;
		font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
		background: #f1f5f9;
		color: #475569;
		padding: 2px 6px;
		border-radius: 6px;
		text-transform: uppercase;
	}

	.main-text {
		font-family: 'urwgothic';
		font-size: 1rem;
		font-weight: 800;
		color: #0f172a;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.icon-circle {
		display: flex;
		align-items: center;
		justify-content: center;

		color: #e1ebeb;
		background-color: #3c6f79;
		padding: 4px 4px;
		border-radius: 999px;
		transition: all 0.3s ease;
	}

	.wide-button:hover {
		border-color: #cbd5e1;
		background: #fdfdfd;
		box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
	}

	.wide-button:hover .icon-circle {
		background-color: #404c55;
		transform: rotate(-45deg);
	}

	.wide-button:active {
		transform: scale(0.98);
	}
</style>
