---
import type { CollectionEntry } from 'astro:content';

interface Props {
	title: string;
	description: string;
	icon: string;
	href: string;
	lang?: string;
	color?: string;
	features?: string[];
}

const { title, description, icon, href, lang, color = 'gray', features } = Astro.props;

const colorClasses = {
	blue: 'bg-blue-500',
	red: 'bg-red-500',
	green: 'bg-green-500',
	purple: 'bg-purple-500',
	orange: 'bg-orange-500',
	yellow: 'bg-yellow-500',
	gray: 'bg-gray-500',
};

const iconBgClass = colorClasses[color] || colorClasses.gray;

// Map icon names to SVG paths
const iconPaths = {
	'summary-brief': 'M13 10V3L4 14h7v7l9-11h-7z', // Lightning bolt
	'summary-detailed':
		'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z', // Document
	tasks:
		'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4', // Clipboard with check
	'questions-answered':
		'M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z', // Chat bubbles
	'questions-open':
		'M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z', // Question mark circle
	ideas:
		'M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z', // Light bulb
	blog: 'M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253', // Book open
	social:
		'M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z', // Message square
};

const currentIconPath = iconPaths[icon] || iconPaths['summary-brief'];
---

<a
	href={href}
	class="block p-8 rounded-xl bg-background-card border border-border hover:bg-background-cardHover hover:border-border-hover transition-all duration-DEFAULT group relative overflow-hidden"
>
	<div class="relative z-10">
		<div class="relative mb-6">
			<div
				class={`w-20 h-20 rounded-2xl ${iconBgClass} flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform duration-DEFAULT`}
			>
				<svg
					class="w-10 h-10 text-white"
					fill="none"
					stroke="currentColor"
					stroke-width="2"
					viewBox="0 0 24 24"
					xmlns="http://www.w3.org/2000/svg"
				>
					<path stroke-linecap="round" stroke-linejoin="round" d={currentIconPath}></path>
				</svg>
			</div>
		</div>

		<h3
			class="text-2xl font-bold text-text-primary mb-3 group-hover:text-primary-DEFAULT transition-colors"
		>
			{title}
		</h3>
		<p class="text-text-secondary mb-6 line-clamp-3">{description}</p>

		{
			features && features.length > 0 && (
				<div class="mb-6">
					<h4 class="font-semibold text-text-primary mb-3 text-sm uppercase tracking-wider">
						{lang === 'de' ? 'Funktionen' : 'Features'}
					</h4>
					<ul class="space-y-2">
						{features.slice(0, 3).map((feature) => (
							<li class="flex items-start gap-2 text-sm text-text-secondary">
								<span class="text-primary-DEFAULT mt-0.5">→</span>
								<span class="line-clamp-1">{feature}</span>
							</li>
						))}
					</ul>
				</div>
			)
		}

		<div class="mt-auto flex items-center justify-between text-primary-DEFAULT">
			<span class="text-sm font-semibold">{lang === 'de' ? 'Mehr erfahren' : 'Learn more'}</span>
			<svg
				class="w-5 h-5 ml-2 group-hover:translate-x-2 transition-transform duration-DEFAULT"
				fill="none"
				stroke="currentColor"
				viewBox="0 0 24 24"
			>
				<path
					stroke-linecap="round"
					stroke-linejoin="round"
					stroke-width="2"
					d="M13 7l5 5-5 5M6 12h12"></path>
			</svg>
		</div>
	</div>

	<div
		class={`absolute top-0 right-0 w-32 h-32 ${iconBgClass} opacity-5 rounded-full -translate-y-16 translate-x-16 group-hover:scale-150 transition-transform duration-700`}
	>
	</div>
</a>