Inbox

import { useEffect } from "react"
import Inbox, { type InboxActor, type InboxItem } from "@/components/ui/inbox"

// A fixed "now" in local time, so Today / Earlier and every relative time read the same anywhere.
const NOW = new Date(2026, 8, 26, 14, 30)
const ago = (minutes: number) => new Date(NOW.getTime() - minutes * 60_000)

const jane: InboxActor = { name: "Jane Park", hue: 52 }
const alex: InboxActor = { name: "Alex Kim", hue: 248 }
const mia: InboxActor = { name: "Mia Chen", hue: 100 }
const omar: InboxActor = { name: "Omar Ali", hue: 30 }
const lena: InboxActor = { name: "Lena Ortiz", hue: 330 }
const sam: InboxActor = { name: "Sam Rivera" } // no hue: an initials coin

const ITEMS: InboxItem[] = [
  { id: "n1", actors: [jane], text: "mentioned you in SSI-14 · Audit chart contrast before the Friday release", time: ago(2), unread: true, mention: true },
  { id: "n2", actors: [alex, mia, omar], text: "commented on Pricing page v3", time: ago(18), unread: true },
  { id: "n3", actors: [omar], text: "requested your review on #482 · Footer links", time: ago(47), unread: true },
  { id: "n4", actors: [mia], text: "marked SSI-11 · Retry failed webhooks as done", time: ago(125), unread: false },
  { id: "n5", actors: [lena, jane], text: "mentioned you in Onboarding copy review", time: ago(60 * 19), unread: true, mention: true },
  { id: "n6", actors: [sam], text: "invited you to the Billing v2 project", time: ago(60 * 26), unread: false },
  { id: "n7", actors: [alex], text: "shipped Release 2.14 to production", time: ago(60 * 24 * 3), unread: false },
]

export default function DemoOne() {
  // open the preview in dark by default; the sandbox theme toggle still works
  useEffect(() => { document.documentElement.classList.add("dark") }, [])
  return (
    <div className="flex w-full justify-center">
      <Inbox items={ITEMS} now={NOW} />
    </div>
  )
}