Notification UI Elements

---
/**
 * Notification
 * Notificatie card (niet-dismissible toast stijl voor use in UI).
 */
interface Props {
  type?: 'info' | 'success' | 'warning' | 'error' | 'neutral';
  title: string;
  message?: string;
  action?: { label: string; href: string };
  timestamp?: string;
  avatar?: string;
}
const { type = 'neutral', title, message, action, timestamp, avatar } = Astro.props;
const colors: Record<string,string> = { info: '#6366f1', success: '#10b981', warning: '#f59e0b', error: '#ef4444', neutral: '#6b7280' };
---
<div class={`notif notif--${type}`}>
  {avatar
    ? <img src={avatar} alt="" class="notif-avatar" />
    : <span class="notif-dot" style={`background: ${colors[type]}`}></span>
  }
  <div class="notif-body">
    <div class="notif-row">
      <p class="notif-title">{title}</p>
      {timestamp && <span class="notif-time">{timestamp}</span>}
    </div>
    {message && <p class="notif-message">{message}</p>}
    {action && <a href={action.href} class="notif-action">{action.label}</a>}
  </div>
</div>
<style>
  .notif { display: flex; align-items: flex-start; gap: 0.875rem; padding: 1rem 1.25rem; background: #fff; border: 1px solid #e5e7eb; border-radius: 0.75rem; box-shadow: 0 4px 16px rgba(0,0,0,0.07); max-width: 380px; }
  .notif-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
  .notif-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 0.25rem; }
  .notif-body { flex: 1; }
  .notif-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.25rem; }
  .notif-title { font-size: 0.9375rem; font-weight: 600; color: #0a0a0a; margin: 0; }
  .notif-time { font-size: 0.75rem; color: #9ca3af; white-space: nowrap; flex-shrink: 0; }
  .notif-message { font-size: 0.875rem; color: #6b7280; line-height: 1.55; margin: 0 0 0.625rem; }
  .notif-action { font-size: 0.875rem; font-weight: 600; color: var(--color-accent,#6366f1); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.15s; }
  .notif-action:hover { border-color: var(--color-accent,#6366f1); }
</style>