---
import type { InfraComponent } from '../data/infrastructure';

interface Props {
	items: InfraComponent[];
}

const { items } = Astro.props;

const statusColors = {
	'self-hosted': {
		bg: 'bg-green-50',
		border: 'border-green-200',
		badge: 'bg-green-100 text-green-800',
		label: 'Self-Hosted',
	},
	replaceable: {
		bg: 'bg-amber-50',
		border: 'border-amber-200',
		badge: 'bg-amber-100 text-amber-800',
		label: 'Migration geplant',
	},
	unavoidable: {
		bg: 'bg-red-50',
		border: 'border-red-200',
		badge: 'bg-red-100 text-red-800',
		label: 'Cloud (unvermeidbar)',
	},
};
---

<div class="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
	{
		items.map((item) => {
			const colors = statusColors[item.status];
			return (
				<div
					class={`rounded-lg border p-4 transition-shadow hover:shadow-md ${colors.bg} ${colors.border}`}
				>
					<div class="mb-2 text-2xl">{item.icon}</div>
					<h4 class="text-sm font-semibold text-text-primary">{item.name}</h4>
					<p class="mt-1 text-xs text-text-muted">{item.technology}</p>
					<span
						class={`mt-2 inline-block rounded-full px-2 py-0.5 text-xs font-medium ${colors.badge}`}
					>
						{colors.label}
					</span>
				</div>
			);
		})
	}
</div>