import { Activity } from "lucide-react"

import { AppShell } from "~/components/layout/app-shell"
import { PageHeader } from "~/components/layout/page-header"
import { EmptyState } from "~/components/states"
import { pageTitle } from "~/lib/page-meta"

export const meta = () => pageTitle("Activity")

export default function ActivityRoute() {
  return (
    <AppShell title="Activity">
      <PageHeader
        title="Activity"
        description="Event stream, audit log, recent changes."
      />
      <EmptyState
        icon={<Activity className="size-6" />}
        title="No activity yet"
        description={
          <>
            Once your app is doing things, this is where audit events, webhook
            deliveries, and recent changes show up — pair with{" "}
            <code className="font-mono text-xs">@crema/log-ui</code>.
          </>
        }
      />
    </AppShell>
  )
}