<script lang="ts" module>
	import type { Component } from 'svelte';

	export interface NavigationCardProps {
		href: string;
		icon: Component<{ class?: string }>;
		title: string;
		description: string;
		disabled?: boolean;
		class?: string;
	}
</script>

<script lang="ts">
	import { cn } from '$lib/utils';

	let {
		href,
		icon: Icon,
		title,
		description,
		disabled = false,
		class: className
	}: NavigationCardProps = $props();
</script>

{#if disabled}
	<div
		class={cn(
			'flex w-full items-center gap-4 rounded-2xl border bg-card px-6 py-5',
			'cursor-not-allowed opacity-50',
			className
		)}
	>
		<div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-muted">
			<Icon class="h-6 w-6 text-muted-foreground" />
		</div>
		<div class="flex flex-col gap-1">
			<span class="text-xl font-semibold">{title}</span>
			<span class="text-sm text-muted-foreground">{description}</span>
		</div>
		<span
			class="ml-auto rounded-full bg-muted px-3 py-1 text-xs font-medium text-muted-foreground"
		>
			Coming soon
		</span>
	</div>
{:else}
	<a
		{href}
		class={cn(
			'group flex w-full items-center gap-4 rounded-2xl border bg-card px-6 py-5',
			'shadow-sm transition-all duration-200',
			'hover:shadow-lg hover:border-primary/20',
			className
		)}
	>
		<div
			class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-primary/10 transition-colors group-hover:bg-primary/20"
		>
			<Icon class="h-6 w-6 text-primary" />
		</div>
		<div class="flex flex-col gap-1">
			<span class="text-xl font-semibold">{title}</span>
			<span class="text-sm text-muted-foreground">{description}</span>
		</div>
		<svg
			class="ml-auto h-5 w-5 text-muted-foreground transition-transform group-hover:translate-x-1"
			xmlns="http://www.w3.org/2000/svg"
			viewBox="0 0 24 24"
			fill="none"
			stroke="currentColor"
			stroke-width="2"
			stroke-linecap="round"
			stroke-linejoin="round"
		>
			<path d="m9 18 6-6-6-6" />
		</svg>
	</a>
{/if}
