Notification Card

---
/**
 * NotificationCard — Toast-like card for app notifications and alerts.
 * 
 * @param {string} title - The notification headline.
 * @param {string} message - The notification detail text.
 * @param {'info'|'warning'|'success'|'error'} type - Optional. Changes the notification dot indicator color. Default is 'info'.
 */
interface Props {
  title: string;
  message: string;
  type?: 'info' | 'warning' | 'success' | 'error';
}

const { title, message, type = 'info' } = Astro.props;
---

<div class={`notify-card notify-card--${type}`}>
  <div class="notify-card__dot" aria-hidden="true"></div>
  <div class="notify-card__content">
    <strong class="notify-card__title">{title}</strong>
    <p class="notify-card__message">{message}</p>
  </div>
</div>

<style>
  .notify-card { 
    display: flex; gap: var(--sp-4, 1rem); 
    padding: var(--sp-4, 1rem); 
    background: var(--c-bg-elev, #0f172a); 
    border-radius: var(--r-md, 12px); 
    border: 1px solid var(--c-border, rgba(255,255,255,0.1)); 
    box-shadow: 0 10px 40px rgba(0,0,0,0.4); 
    max-width: 300px; 
  }
  .notify-card__dot { 
    width: 8px; height: 8px; 
    border-radius: var(--r-full, 50%); 
    margin-top: 5px; 
    flex-shrink: 0;
  }
  .notify-card__content { flex: 1; }
  .notify-card__title { font-size: 0.9rem; color: var(--c-text-1, #fff); }
  .notify-card__message { margin: 2px 0 0; font-size: 0.82rem; color: var(--c-text-2, #94a3b8); line-height: 1.4; }
  
  .notify-card--info .notify-card__dot { background: var(--c-primary, #6366f1); }
  .notify-card--success .notify-card__dot { background: #10b981; }
  .notify-card--warning .notify-card__dot { background: #f59e0b; }
  .notify-card--error .notify-card__dot { background: #ef4444; }
</style>