import { Activity } from "lucide-react"

import { AppShell } from "~/components/layout/app-shell"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "~/components/ui/card"
import { pageTitle } from "~/lib/page-meta"

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

export default function ActivityRoute() {
  return (
    <AppShell title="Activity">
      <Card>
        <CardHeader>
          <CardTitle>Activity</CardTitle>
          <CardDescription>
            Event stream, audit log, recent changes.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="flex flex-col items-center justify-center gap-3 rounded-lg border-2 border-dashed border-muted-foreground/20 bg-muted/30 p-12 text-center">
            <div className="flex size-12 items-center justify-center rounded-xl bg-background text-muted-foreground">
              <Activity className="size-6" />
            </div>
            <div className="max-w-md">
              <p className="font-medium">No activity yet</p>
              <p className="mt-1 text-sm text-muted-foreground">
                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>.
              </p>
            </div>
          </div>
        </CardContent>
      </Card>
    </AppShell>
  )
}