IconNav icon

---
interface NavItem {
  icon: string;
  label: string;
  href: string;
  active?: boolean;
  badge?: string;
}

interface Props {
  items?: NavItem[];
  orientation?: 'horizontal' | 'vertical';
}

const {
  items = [
    { icon: '🏠', label: 'Home', href: '/', active: true },
    { icon: '🛠', label: 'Diensten', href: '/diensten' },
    { icon: '📁', label: 'Cases', href: '/cases', badge: 'Nieuw' },
    { icon: '✏️', label: 'Blog', href: '/blog' },
    { icon: '👥', label: 'Over ons', href: '/over-ons' },
    { icon: '💬', label: 'Contact', href: '/contact' },
  ],
  orientation = 'horizontal',
} = Astro.props;
---

<nav class:list={['inav', `inav--${orientation}`]} aria-label="Navigatie met iconen">
  {items.map((item) => (
    <a
      class:list={['inav__item', item.active && 'inav__item--active']}
      href={item.href}
      aria-current={item.active ? 'page' : undefined}
    >
      <span class="inav__icon" aria-hidden="true">{item.icon}</span>
      <span class="inav__label">{item.label}</span>
      {item.badge && <span class="inav__badge">{item.badge}</span>}
    </a>
  ))}
</nav>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .inav {
    display: flex;
    gap: 0.25rem;
  }
  .inav--vertical { flex-direction: column; }
  .inav__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    text-decoration: none;
    color: #666;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
    position: relative;
  }
  .inav__item:hover { background: #f5f5f5; color: var(--color-primary, #0a0a0a); }
  .inav__item--active {
    background: rgba(99,102,241,0.1);
    color: var(--color-accent, #6366f1);
    font-weight: 700;
  }
  .inav__icon { font-size: 1.1rem; }
  .inav__badge {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    background: var(--color-accent, #6366f1);
    color: #fff;
    font-size: 0.55rem;
    font-weight: 700;
    padding: 0.1rem 0.35rem;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
</style>