Dialog

import * as React from "react";
import { Button, ConfirmDialog, Dialog, DialogClose, DialogContent, DialogFooter, DialogTrigger } from "@/components/ui/layro-dialog";
import { Trash2 } from "lucide-react";

/* A dialog that insists on a title, and a confirm dialog for the
   destructive case: type the workspace name to enable the button, and the
   action shows its own pending state while the promise runs. */

export default function DialogDemo() {
  const [done, setDone] = React.useState<string | null>(null);
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background p-6">
      <div className="w-full min-w-0 rounded-[18px] [corner-shape:squircle] bg-card p-6 text-card-foreground ring-1 ring-border" style={{ maxWidth: 420 }}>
        <h2 className="text-[16px] font-semibold tracking-[-0.01em]">Danger zone</h2>
        <div className="mb-5" />
        <div className="flex flex-wrap gap-2">
          <Dialog>
            <DialogTrigger asChild><Button variant="outline">Rename project</Button></DialogTrigger>
            <DialogContent title="Rename project" description="Everyone with access sees the new name straight away.">
              <input defaultValue="Northwind rebrand" aria-label="Project name" autoFocus className="h-9 w-full rounded-[10px] [corner-shape:squircle] bg-card px-3 text-[13px] ring-1 ring-inset ring-input outline-none focus-visible:ring-2 focus-visible:ring-ring" />
              <DialogFooter>
                <DialogClose asChild><Button variant="outline">Cancel</Button></DialogClose>
                <DialogClose asChild><Button onClick={() => setDone("Project renamed.")}>Save</Button></DialogClose>
              </DialogFooter>
            </DialogContent>
          </Dialog>
          <ConfirmDialog
            trigger={<Button variant="destructive"><Trash2 /> Delete workspace</Button>}
            title="Delete Northwind Studio?"
            description="9 people lose access and every file is deleted after 30 days."
            actionLabel="Delete workspace"
            confirmText="Northwind Studio"
            onConfirm={() => new Promise<void>((r) => setTimeout(() => { setDone("Workspace deleted. Restorable for 30 days."); r(); }, 900))}
          />
        </div>
        <p className="mt-4 text-[12.5px] text-muted-foreground" aria-live="polite">{done ?? "Nothing changed yet."}</p>
      </div>
    </div>
  );
}