"use client";

import { Badge } from "./ui/badge";
import { Button } from "./ui/button";
import { ScrollArea } from "./ui/scroll-area";
import { GitBranch, Plus, BookOpen, Server, Globe } from "lucide-react";

export default function ReplicationPage() {
  return (
    <div className="flex flex-1 flex-col min-h-0">
      <div className="flex items-center gap-3 border-b border-border px-6 py-3">
        <GitBranch className="h-4 w-4 text-primary" />
        <h2 className="text-sm font-semibold text-foreground">Replication</h2>
        <div className="flex-1" />
      </div>

      <ScrollArea className="flex-1">
        <div className="mx-auto max-w-3xl p-8 space-y-8">
          <div>
            <p className="text-xs text-muted-foreground">
              Deploy read replicas across multiple regions, or replicate database changes to external data warehouses and analytics platforms
            </p>
          </div>

          <div className="flex items-center justify-center py-8">
            <div className="flex items-center gap-3 rounded border border-border bg-card px-5 py-4">
              <Server className="h-5 w-5 text-muted-foreground" />
              <div>
                <p className="text-sm font-medium text-foreground">Primary Database</p>
                <p className="text-xs text-muted-foreground">Active region</p>
              </div>
              <Globe className="h-5 w-5 text-success ml-2" />
            </div>
          </div>

          <div className="flex items-center justify-between border-t border-border pt-6">
            <div className="relative">
              <input
                type="text"
                placeholder="Filter destinations"
                className="h-8 w-[200px] rounded border border-border bg-background px-3 text-xs text-foreground outline-none placeholder:text-muted-foreground"
              />
            </div>
            <div className="flex items-center gap-2">
              <Button size="sm">
                <Plus className="h-3 w-3" /> Add destination
              </Button>
              <Button variant="outline" size="sm">
                <BookOpen className="h-3 w-3" /> Docs
              </Button>
            </div>
          </div>

          <div className="flex flex-col items-center justify-center rounded border border-dashed border-border py-16 text-center">
            <GitBranch className="h-10 w-10 text-primary/20 mb-4" />
            <p className="text-sm font-medium text-foreground">
              Replication keeps your data in sync across systems
            </p>
            <p className="text-xs text-muted-foreground mt-1 max-w-md">
              Deploy read replicas for lower latency and better resource management, or capture database changes to external platforms for real-time data pipelines.
            </p>
            <Button size="sm" className="mt-4">
              <Plus className="h-3 w-3" /> Add destination
            </Button>
          </div>
        </div>
      </ScrollArea>
    </div>
  );
}
