"use client";import { useState } from "react";import { Save, Check, Loader2 } from "lucide-react";import { Button } from "@/components/ui/button";import {  Dialog,  DialogContent,  DialogDescription,  DialogFooter,  DialogHeader,  DialogTitle,  DialogTrigger,} from "@/components/ui/dialog";export const title = "React Dialog Block Save Draft";export default function DialogSaveDraft() {  const [open, setOpen] = useState(false);  const [saved, setSaved] = useState(false);  const [isSaving, setIsSaving] = useState(false);  const handleSave = async () => {    setIsSaving(true);    await new Promise((resolve) => setTimeout(resolve, 1000));    setIsSaving(false);    setSaved(true);  };  const handleDiscard = () => {    setOpen(false);    setSaved(false);  };  if (saved) {    return (      <Dialog open={open} onOpenChange={setOpen}>        <div className="flex min-h-[350px] items-center justify-center">          <DialogTrigger asChild>            <Button variant="outline">              <Save className="mr-2 h-4 w-4" />              Save Draft            </Button>          </DialogTrigger>        </div>        <DialogContent className="sm:max-w-sm">          <div className="flex flex-col items-center justify-center py-8 text-center">            <Check className="h-8 w-8 text-primary" />            <h3 className="mt-4 text-lg font-semibold">Draft Saved</h3>            <p className="mt-2 text-sm text-muted-foreground">              Your changes have been saved.            </p>            <Button onClick={() => { setOpen(false); setSaved(false); }} className="mt-6">              Done            </Button>          </div>        </DialogContent>      </Dialog>    );  }  return (    <Dialog open={open} onOpenChange={setOpen}>      <div className="flex min-h-[350px] items-center justify-center">        <DialogTrigger asChild>          <Button variant="outline">            <Save className="mr-2 h-4 w-4" />            Save Draft          </Button>        </DialogTrigger>      </div>      <DialogContent className="sm:max-w-sm">        <DialogHeader>          <DialogTitle>Save Draft</DialogTitle>          <DialogDescription>            You have unsaved changes.          </DialogDescription>        </DialogHeader>        <div className="py-4">          <div className="flex items-center justify-between rounded-lg border p-3">            <div>              <p className="text-sm font-medium">Untitled Document</p>              <p className="text-xs text-muted-foreground">Last saved 5 min ago</p>            </div>            <Button variant="ghost" size="sm" className="text-xs">              History            </Button>          </div>        </div>        <DialogFooter>          <Button variant="outline" onClick={handleDiscard}>            Discard          </Button>          <Button onClick={handleSave} disabled={isSaving}>            {isSaving ? (              <>                <Loader2 className="mr-2 h-4 w-4 animate-spin" />                Saving...              </>            ) : (              "Save"            )}          </Button>        </DialogFooter>      </DialogContent>    </Dialog>  );}