frontend/src/components/layout/TopBar.tsx

import { useDashboard } from "@/lib/dashboard"
import { Badge } from "@/components/ui/badge"

export function TopBar() {
  const { params, result, running } = useDashboard()

  return (
    <header
      id="top"
      className="sticky top-0 z-30 border-b border-border/60 bg-background/70 backdrop-blur-xl"
    >
      <div className="flex flex-wrap items-center justify-between gap-3 px-6 py-4">
        <div>
          <div className="flex items-center gap-2.5">
            <h1 className="font-display text-xl font-semibold tracking-tight">
              Tiny&nbsp;Trigger
            </h1>
            <Badge variant={running ? "live" : "default"}>
              {running ? (
                <>
                  <span className="size-1.5 rounded-full bg-primary signal-dot" />
                  running
                </>
              ) : (
                "idle"
              )}
            </Badge>
          </div>
          <p className="mt-0.5 text-xs text-muted-foreground">
            Open-vocabulary video automations · detect → validate rules → dispatch
          </p>
        </div>

        <div className="flex flex-wrap items-center gap-2">
          <Badge>{params.modelName}</Badge>
          <Badge variant={params.enableWebhooks ? "info" : "default"}>
            webhooks {params.enableWebhooks ? "live" : "off"}
          </Badge>
          {result && (
            <Badge variant={result.status === "fired" ? "live" : "warning"}>
              {result.status === "fired" ? `${result.stats.actions} fired` : "no match"}
            </Badge>
          )}
        </div>
      </div>
    </header>
  )
}