import type { Metadata } from "next";
import { Suspense } from "react";
import { PageHeader, SkeletonPanel } from "@/components/ui";
import { Alerts } from "./alerts";

export const metadata: Metadata = { title: "Alerts", description: "Alert rules on signal, importance, event type, group, entity, source, keyword, country, silent or first-party changes. Delivered in this browser or to a signed HTTPS webhook.", robots: { index: false } };

export default function AlertsPage() {
  return (
    <>
      <PageHeader compact kicker="Rules evaluated by the engine on every new event" title="Alerts" description="Define conditions once. Web rules notify this browser while any WebSensor tab is open; webhook rules POST signed JSON to your HTTPS endpoint. Every delivery is logged below." />
      <Suspense fallback={<div className="grid gap-4 lg:grid-cols-[400px_minmax(0,1fr)]"><SkeletonPanel lines={10} /><SkeletonPanel lines={6} /></div>}>
        <Alerts />
      </Suspense>
    </>
  );
}