Alert UI Elements

---
/**
 * Alert
 * Inline melding met varianten: info, success, warning, error.
 */
interface Props {
  variant?: 'info' | 'success' | 'warning' | 'error';
  title?: string;
  message: string;
  dismissible?: boolean;
}
const { variant = 'info', title, message, dismissible = false } = Astro.props;
const icons: Record<string,string> = { info: 'ℹ️', success: '✅', warning: '⚠️', error: '❌' };
---
<div class={`alert alert--${variant}`} role="alert">
  <span class="alert-icon" aria-hidden="true">{icons[variant]}</span>
  <div class="alert-content">
    {title && <strong class="alert-title">{title}</strong>}
    <span class="alert-message">{message}</span>
  </div>
  {dismissible && (
    <button class="alert-close" aria-label="Sluiten" onclick="this.closest('.alert').remove()">×</button>
  )}
</div>
<style>
  .alert { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem 1.25rem; border-radius: 0.625rem; border: 1px solid; }
  .alert--info { background: #eff6ff; border-color: #bfdbfe; }
  .alert--success { background: #f0fdf4; border-color: #bbf7d0; }
  .alert--warning { background: #fffbeb; border-color: #fde68a; }
  .alert--error { background: #fef2f2; border-color: #fecaca; }
  .alert-icon { font-size: 1.125rem; flex-shrink: 0; line-height: 1.4; }
  .alert-content { flex: 1; display: flex; flex-direction: column; gap: 0.25rem; }
  .alert-title { font-size: 0.9375rem; font-weight: 700; }
  .alert--info .alert-title { color: #1e40af; }
  .alert--success .alert-title { color: #166534; }
  .alert--warning .alert-title { color: #92400e; }
  .alert--error .alert-title { color: #991b1b; }
  .alert-message { font-size: 0.9375rem; line-height: 1.5; }
  .alert--info .alert-message { color: #1e3a8a; }
  .alert--success .alert-message { color: #14532d; }
  .alert--warning .alert-message { color: #78350f; }
  .alert--error .alert-message { color: #7f1d1d; }
  .alert-close { background: none; border: none; cursor: pointer; font-size: 1.25rem; line-height: 1; color: inherit; opacity: 0.5; padding: 0; flex-shrink: 0; }
  .alert-close:hover { opacity: 1; }
</style>