Status page

"use client";

import * as React from "react";
import { Bell, Check } from "lucide-react";
import { SystemStatus } from "@/components/blocks/system-status";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Popover } from "@/components/ui/popover";

/** A complete public status page: branded header, subscribe, status block and footer. */
export function StatusPage() {
  const [email, setEmail] = React.useState("");
  const [done, setDone] = React.useState(false);
  return (
    <div className="w-full overflow-hidden rounded-xl border border-border bg-muted/20">
      <header className="flex items-center justify-between border-b border-border bg-background px-6 py-4">
        <span className="font-semibold">Northwind <span className="font-normal text-muted-foreground">Status</span></span>
        <Popover
          align="end"
          trigger={<Button size="sm" variant="outline"><Bell /> Subscribe</Button>}
        >
          {done ? (
            <p className="flex items-center gap-2 text-sm"><Check className="size-4 text-emerald-500" /> You&apos;ll get incident updates.</p>
          ) : (
            <form onSubmit={(e) => { e.preventDefault(); if (/^\S+@\S+\.\S+$/.test(email)) setDone(true); }} className="w-64 space-y-2">
              <p className="text-sm font-medium">Get notified of incidents</p>
              <Input type="email" value={email} onValueChange={setEmail} placeholder="you@company.com" aria-label="Email" size="sm" />
              <Button type="submit" size="sm" className="w-full">Subscribe</Button>
            </form>
          )}
        </Popover>
      </header>
      <main className="mx-auto max-w-3xl px-4 py-10">
        <SystemStatus />
      </main>
      <footer className="border-t border-border px-6 py-5 text-center text-xs text-muted-foreground">Times shown in UTC · Powered by Northwind</footer>
    </div>
  );
}

export default StatusPage;