---
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="terminal-panel-muted terminal-panel-accent terminal-interactive-card group overflow-hidden rounded-2xl" style="--accent-rgb: var(--primary-rgb); --accent-color: var(--primary);">
      <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 border border-[color:color-mix(in_oklab,var(--primary)_14%,var(--border-color))] bg-[linear-gradient(180deg,color-mix(in_oklab,var(--primary)_16%,var(--terminal-bg)),color-mix(in_oklab,var(--primary)_9%,var(--header-bg)))] text-[var(--primary)] shadow-[0_10px_24px_rgba(var(--text-rgb),0.06)]">
          <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>