---
import Heading from '../typography/Heading.astro';
import Text from '../typography/Text.astro';

export interface Props {
	title: string;
	description: string;
	icon: string;
	status: 'available' | 'beta' | 'coming-soon';
	href: string;
	class?: string;
}

const { title, description, icon, status, href, class: className = '' } = Astro.props;

const statusConfig = {
	available: {
		text: 'Verfügbar',
		bgClass: 'bg-green-100 dark:bg-green-900/30',
		textClass: 'text-green-700 dark:text-green-400',
	},
	beta: {
		text: 'Beta',
		bgClass: 'bg-yellow-100 dark:bg-yellow-900/30',
		textClass: 'text-yellow-700 dark:text-yellow-400',
	},
	'coming-soon': {
		text: 'Demnächst',
		bgClass: 'bg-gray-100 dark:bg-gray-800',
		textClass: 'text-gray-600 dark:text-gray-400',
	},
};

const currentStatus = statusConfig[status] || statusConfig['coming-soon'];
---

<a href={href} class={`group relative block h-full ${className}`}>
	<div
		class="relative h-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-2xl p-6 transition-all duration-300 hover:bg-gradient-to-br hover:from-mana-blue/5 hover:to-blue-500/5 dark:hover:from-mana-blue/10 dark:hover:to-blue-500/10 hover:border-mana-blue/30 hover:shadow-xl hover:shadow-mana-blue/10 hover:-translate-y-1"
	>
		<!-- Flex Container: Icon left, Content right -->
		<div class="flex gap-4 items-start">
			<!-- Icon Left -->
			<div class="flex-shrink-0">
				<div
					class="w-16 h-16 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-600 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform group-hover:from-mana-blue/10 group-hover:to-blue-500/10 dark:group-hover:from-mana-blue/20 dark:group-hover:to-blue-500/20"
				>
					{
						icon.startsWith('/') ? (
							<img src={icon} alt={title} class="w-12 h-12 object-contain" />
						) : (
							<span class="text-4xl select-none">{icon}</span>
						)
					}
				</div>
			</div>

			<!-- Content Right -->
			<div class="flex-1 min-w-0">
				<!-- Title and Status -->
				<div class="flex items-start justify-between gap-2 mb-2">
					<Heading as="h3" size="h6" class="group-hover:text-mana-blue transition-colors">
						{title}
					</Heading>
					<div
						class={`${currentStatus.bgClass} ${currentStatus.textClass} px-2 py-1 rounded-full text-xs font-medium whitespace-nowrap flex-shrink-0`}
					>
						{currentStatus.text}
					</div>
				</div>

				<!-- Description -->
				<Text size="sm" color="muted" class="line-clamp-2 mb-3">
					{description}
				</Text>

				<!-- CTA Link -->
				<span
					class="inline-flex items-center gap-1 text-xs font-medium text-mana-blue opacity-0 group-hover:opacity-100 transition-opacity"
				>
					Mehr erfahren
					<svg
						class="w-3 h-3 group-hover:translate-x-1 transition-transform"
						fill="none"
						stroke="currentColor"
						viewBox="0 0 24 24"
					>
						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"
						></path>
					</svg>
				</span>
			</div>
		</div>
	</div>
</a>
