import { Inbox } from "@/components/blocks/inbox";

import { Inbox } from "@/components/blocks/inbox";

const items = [
  {
    id: "n1",
    from: { name: "Priya Nair", email: "priya@churchmediasquad.com" },
    subject: "Easter Series concepts are ready for review",
    body: "Three directions are up in the concept board.",
    timestamp: new Date().toISOString(),
    unread: true,
  },
];

export function Example() {
  return <Inbox items={items} />;
}

Inbox                          (main component)
├── showPreview?               (boolean — default true; false renders the list alone)
├── multiSelect?               (boolean — default true; shift/cmd-click + floating bulk toolbar)
├── showSearch?                (boolean — default true)
├── searchPlaceholder?         (string — default "Search notifications")
├── showUnreadFilter?          (boolean — default true; "Unread only" entry in the header menu)
├── unreadOnlyLabel?           (string — default "Unread only")
├── onMarkAllAsRead?           (() => void — adds "Mark all as read" to the header menu)
├── markAllAsReadLabel?        (string — default "Mark all as read")
├── selectedId?                (string | null — controlled selection)
├── defaultSelectedId?         (string | null — uncontrolled; nothing is selected by default)
├── onSelect?                  ((item: InboxItem) => void)
├── onToggleRead?              ((item) => void — adds "Mark as read"/"unread" to the row menu)
├── onToggleStar?              ((item) => void — renders the star button on the pane toolbar)
├── onArchive?                 ((item) => void — renders the archive button)
├── onDelete?                  ((item) => void — renders the delete button)
├── previewActions?            (ReactNode — extra nodes on the pane toolbar)
├── onPreviewClose?            (() => void — fires on the pane's X; clears selection otherwise)
├── groupByDay?                (boolean — default true; Today / Yesterday / Last 7 days / … headings)
├── titleWidth?                (number — px, default 280; the title column)
├── projectWidth?              (number — px, default 160; the project column)
├── kindWidth?                 (number — px, default 110; the event-kind column)
├── showFilters?               (boolean — default true; the Filters button)
├── filterFields?              (FilterField[] — defaults to status, sender, title, read, starred, attachments)
├── filterValue?               (FilterGroup — controlled filter tree)
├── onFilterChange?            ((value: FilterGroup) => void)
├── items                      (InboxItem[])
│   ├── id                     (string — unique key)
│   ├── from                   (InboxSender)
│   │   ├── name               (string — drives the avatar initials + colour)
│   │   ├── email?             (string — shown in the reading pane)
│   │   ├── avatar?            (string — image URL)
│   │   └── initials?          (string — initials override)
│   ├── project?               (string — what it is about; its own left column)
│   ├── subject?               (string — the row's title column, bold in the pane)
│   ├── body                   (ReactNode — rendered in full in the reading pane)
│   ├── preview?               (ReactNode — the row's one truncated line; defaults to body)
│   ├── timestamp              (ISO string | Date)
│   ├── status?                (string | InboxStatus — the row's leading dot)
│   │   ├── label              (string — tooltip + screen-reader text)
│   │   ├── color?             (BadgeColor | `#rrggbb` — the dot's swatch; default "muted")
│   │   └── icon?              (ReactNode — a glyph instead of the dot; tint it yourself)
│   ├── unread?                (boolean — unread dot + bold treatment)
│   ├── starred?               (boolean — fills the star on the pane toolbar)
│   ├── badge?                 (ReactNode — pill after the subject, READING PANE only)
│   ├── statusChange?          ({ from, to } — renders "changed status from [from] → [to]")
│   ├── upload?                ({ project } — renders "uploaded N files to [project]")
│   └── attachments?           (InboxAttachment[] — { id, name, size? })
├── emptyState?                (ReactNode — replaces the list empty state)
├── card?                      (boolean — default true; wraps in the card surface)
├── height?                    (string | number — default "28rem")
├── listWidth?                 (number — px, default 352; starting width when resizable)
├── resizable?                 (boolean — default true; drag the divider between the panes)
├── minListWidth?              (number — px, default 240)
├── maxListWidth?              (number — px, default 560)
└── className?                 (string)