Chip UI Elements

---
/**
 * Chip
 * Kleine tag/chip elementen voor labels, filters of categorieën.
 */
interface Props {
  label: string;
  variant?: 'default' | 'primary' | 'success' | 'warning' | 'error' | 'outline';
  size?: 'sm' | 'md' | 'lg';
  icon?: string;
  removable?: boolean;
}
const { label, variant = 'default', size = 'md', icon, removable = false } = Astro.props;
---
<span class={`chip chip--${variant} chip--${size}`}>
  {icon && <span class="chip-icon" aria-hidden="true">{icon}</span>}
  <span class="chip-label">{label}</span>
  {removable && <button class="chip-remove" aria-label={`Verwijder ${label}`} onclick="this.closest('.chip').remove()">×</button>}
</span>
<style>
  .chip { display: inline-flex; align-items: center; gap: 0.375rem; border-radius: 2rem; font-weight: 500; white-space: nowrap; }
  .chip--sm { font-size: 0.75rem; padding: 0.2rem 0.625rem; }
  .chip--md { font-size: 0.8125rem; padding: 0.3125rem 0.875rem; }
  .chip--lg { font-size: 0.9375rem; padding: 0.4375rem 1.125rem; }
  .chip--default { background: #f3f4f6; color: #374151; }
  .chip--primary { background: rgba(99,102,241,0.1); color: var(--color-accent,#6366f1); border: 1px solid rgba(99,102,241,0.2); }
  .chip--success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
  .chip--warning { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
  .chip--error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
  .chip--outline { background: transparent; color: #374151; border: 1.5px solid #d1d5db; }
  .chip-icon { font-size: 0.875em; }
  .chip-label { line-height: 1; }
  .chip-remove { background: none; border: none; cursor: pointer; font-size: 1em; line-height: 1; color: inherit; opacity: 0.6; padding: 0; display: flex; align-items: center; }
  .chip-remove:hover { opacity: 1; }
</style>