---
import type { TechStackItem } from '../lib/types';

interface Props {
  items: TechStackItem[];
}

const { items } = Astro.props;
---

<ul class="grid grid-cols-1 gap-3 sm:grid-cols-2">
  {items.map((item) => (
    <li class="group overflow-hidden rounded-2xl border border-[var(--border-color)] bg-[var(--terminal-bg)] shadow-[0_12px_30px_rgba(37,99,235,0.08)] transition-transform duration-200 hover:-translate-y-0.5">
      <div class="flex items-start gap-3 px-4 py-4">
        <span class="mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-[var(--primary)] text-white shadow-[0_10px_24px_rgba(37,99,235,0.24)]">
          <i class="fas fa-code text-xs"></i>
        </span>
        <span class="min-w-0 flex-1">
          <span class="block text-[11px] uppercase tracking-[0.2em] text-[var(--text-tertiary)]">
            stack://module
          </span>
          <span class="mt-1 block text-base font-semibold text-[var(--title-color)]">{item.name}</span>
          <span class="mt-2 block font-mono text-xs text-[var(--primary)]">
            {item.level || 'active'}
          </span>
        </span>
      </div>
    </li>
  ))}
</ul>
