Notification center

"use client"

import * as React from "react"
import { NotificationCenter } from "@/components/notification-center"
import type { Notice } from "@/lib/team"

const minutesAgo = (m: number) => new Date(Date.now() - m * 60_000).toISOString()

const initial: Notice[] = [
  { id: "n1", kind: "approval-waiting", title: "Dev agent wants to run a migration on Production", detail: "Add region to orders", at: minutesAgo(3), read: false, action: { label: "Review" } },
  { id: "n2", kind: "guardrail-stopped", title: "A run was stopped at its budget", detail: "Backfill customers.region used its 30 minutes", at: minutesAgo(41), read: false, action: { label: "See the run" } },
  { id: "n3", kind: "run-finished", title: "Index on orders.customer_id is live on Staging", at: minutesAgo(180), read: true },
  { id: "n4", kind: "invite", title: "Priya invited you to the Payments workspace", at: minutesAgo(60 * 26), read: true, action: { label: "Accept" } },
]

export default function Example() {
  const [notices, setNotices] = React.useState(initial)
  return (
    <div className="flex justify-end">
      <NotificationCenter
        notices={notices}
        onOpen={(id) => setNotices((ns) => ns.map((n) => (n.id === id ? { ...n, read: true } : n)))}
        onMarkAllRead={() => setNotices((ns) => ns.map((n) => ({ ...n, read: true })))}
      />
    </div>
  )
}