"use client";

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Bell, AlertTriangle } from "lucide-react";

export default function AdminAlertsPage() {
  return (
    <div className="p-6 space-y-6 max-w-7xl mx-auto">
      <div>
        <h1 className="text-3xl font-bold tracking-tight text-foreground flex items-center gap-3">
          <Bell className="h-8 w-8 text-primary" />
          Global SOS & Alerts
        </h1>
        <p className="text-muted-foreground mt-1">
          Monitor emergency alerts, SOS signals, and critical incidents across all agencies.
        </p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {/* Placeholder cards for alerts */}
        <Card className="border-border bg-card shadow-sm border-l-4 border-l-destructive">
          <CardHeader className="pb-3 border-b border-border">
            <div className="flex items-center gap-3">
              <div className="h-10 w-10 rounded-full bg-destructive/10 flex items-center justify-center text-destructive">
                <AlertTriangle className="h-5 w-5" />
              </div>
              <div>
                <CardTitle className="text-lg text-card-foreground">Guard SOS</CardTitle>
                <CardDescription className="text-destructive font-medium">Critical</CardDescription>
              </div>
            </div>
          </CardHeader>
          <CardContent className="pt-4">
            <p className="text-sm text-foreground">
              A guard has triggered an SOS alert at Site A (Apex Corporate Tech).
            </p>
            <div className="mt-4 text-xs text-muted-foreground flex justify-between">
              <span>Agency: Global Security Inc.</span>
              <span>10 mins ago</span>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}