import type { ReactNode } from "react";

/** Minimal notification shape the presentational components render. */
export interface NotificationItemData {
  id: string;
  /** Semantic type key (e.g. `INVOICE_ISSUED`). Drives the per-app visual. */
  type: string;
  title: string;
  body: string;
  createdAt: string;
  isRead: boolean;
  /** Priority key (e.g. `HIGH`). `HIGH` gets an amber urgency cue. */
  priority?: string | null;
  /** Deep-link path the item points to, if any. */
  link?: string | null;
  /** Arbitrary structured payload (bookingId, invoiceId, …). */
  data?: Record<string, unknown> | null;
}

/**
 * Per-item visual resolved by the hosting app's registry. `color` is a Mantine
 * color key (e.g. `"blue"`, `"green"`); `icon` is any node (usually a lucide
 * icon). The app maps `item.type`/`item.data` → this.
 */
export interface NotificationVisual {
  icon?: ReactNode;
  color?: string;
}

/** Signature of the app-owned registry passed into the drawer. */
export type ResolveNotificationVisual = (
  item: NotificationItemData,
) => NotificationVisual;
