Alert

Cần thông báo cho user?
├─ Inline, persistent, user cần đọc → Alert
├─ Tạm thời, auto-dismiss → Toast
├─ Cần user action/confirm → Modal (alert dialog)
├─ System-wide notice → Banner (full-width Alert) 
└─ Contextual hint nhỏ → Tooltip

.alert--banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-index-fixed);
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: var(--spacing-3) var(--spacing-5);
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  min-height: var(--spacing-11);
  animation: banner-slide-down var(--duration-normal-2) var(--easing-emphasized-decelerate);
}

/* Offline banner specifically */
.alert--banner[data-variant="warning"] {
  background: var(--warning-muted);
  color: var(--warning-muted-foreground);
}

@keyframes banner-slide-down {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

/* Push body content */
body.has-banner {
  padding-top: var(--spacing-11);
}

@media (prefers-reduced-motion: reduce) {
  .alert--banner { animation: none; }
}

interface AlertProps {
  /** Severity variant */
  variant?: 'info' | 'success' | 'warning' | 'destructive';
  /** Title text (optional, bold) */
  title?: string;
  /** Description/body */
  children: ReactNode;
  /** Custom icon override */
  icon?: ReactNode;
  /** Có thể dismiss (hiện close button) */
  dismissible?: boolean;
  /** Callback khi dismiss */
  onDismiss?: () => void;
  /** Action buttons/links */
  action?: ReactNode;
  /** Display mode */
  mode?: 'inline' | 'banner';
}

{/* Info alert */}
<Alert variant="info" title="Gợi ý">
  Bạn có thể liên kết thêm thẻ ngân hàng để thanh toán nhanh hơn.
</Alert>

{/* Error alert with action */}
<Alert
  variant="destructive"
  title="Xác thực thất bại"
  action={<Button variant="outline" size="sm">Thử lại</Button>}
>
  Không thể kết nối đến máy chủ. Vui lòng kiểm tra kết nối mạng.
</Alert>

{/* Dismissible success */}
<Alert variant="success" dismissible onDismiss={handleDismiss}>
  Giao dịch thành công! Mã giao dịch: #VNP12345.
</Alert>

{/* Banner mode — maintenance */}
<Alert variant="warning" mode="banner">
  Hệ thống bảo trì từ 00:00 — 04:00 ngày 27/02/2026.
</Alert>

{/* Banner mode — offline detection */}
<Alert variant="warning" mode="banner" icon={<WifiOffIcon />}>
  Không có kết nối mạng. Dữ liệu sẽ đồng bộ khi online.
</Alert>