"use client";

import { Header } from "@/components/layout/header";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import { QuarantinePanel } from "@/components/quarantine";
import { BlockedSourcesPanel } from "@/components/quarantine/blocked-sources-panel";

export default function QuarantinePage() {
  return (
    <>
      <Header title="Quarantine" />
      <div className="p-6">
        <Tabs defaultValue="assertions" className="space-y-6">
          <TabsList>
            <TabsTrigger value="assertions">Flagged Assertions</TabsTrigger>
            <TabsTrigger value="sources">Blocked Sources</TabsTrigger>
          </TabsList>

          <TabsContent value="assertions">
            <QuarantinePanel />
          </TabsContent>

          <TabsContent value="sources">
            <div className="space-y-6">
              <div className="rounded-lg border border-border bg-card p-6">
                <h2 className="text-lg font-medium text-card-foreground mb-2">
                  Blocked Sources
                </h2>
                <p className="text-sm text-muted-foreground">
                  Sources that have been blocked are excluded from all query results.
                  Restore a source to include its assertions in queries again.
                </p>
              </div>
              <div className="rounded-lg border border-border bg-card p-6">
                <BlockedSourcesPanel />
              </div>
            </div>
          </TabsContent>
        </Tabs>
      </div>
    </>
  );
}
