"use client";import { useState } from "react";import { LayoutTemplate, Loader2, FileText, Mail, Presentation, File } from "lucide-react";import { Button } from "@/components/ui/button";import {  Dialog,  DialogContent,  DialogDescription,  DialogFooter,  DialogHeader,  DialogTitle,  DialogTrigger,} from "@/components/ui/dialog";import { Badge } from "@/components/ui/badge";import { cn } from "@/lib/utils";const templates = [  { id: "1", name: "Blank", description: "Start fresh", icon: File },  { id: "2", name: "Report", description: "Professional layout", icon: FileText },  { id: "3", name: "Newsletter", description: "Email design", icon: Mail, badge: "Popular" },  { id: "4", name: "Pitch Deck", description: "Presentations", icon: Presentation },];export const title = "React Dialog Block Select Template";export default function DialogSelectTemplate() {  const [open, setOpen] = useState(false);  const [selected, setSelected] = useState("1");  const [isLoading, setIsLoading] = useState(false);  const handleSelect = async () => {    setIsLoading(true);    await new Promise((resolve) => setTimeout(resolve, 1000));    setIsLoading(false);    setOpen(false);  };  return (    <Dialog open={open} onOpenChange={setOpen}>      <div className="flex min-h-[350px] items-center justify-center">        <DialogTrigger asChild>          <Button variant="outline">            <LayoutTemplate className="mr-2 h-4 w-4" />            Choose Template          </Button>        </DialogTrigger>      </div>      <DialogContent className="sm:max-w-sm">        <DialogHeader>          <DialogTitle>Select Template</DialogTitle>          <DialogDescription>            Choose a template to get started.          </DialogDescription>        </DialogHeader>        <div className="grid grid-cols-2 gap-3 py-4">          {templates.map((template) => {            const Icon = template.icon;            return (              <button                key={template.id}                onClick={() => setSelected(template.id)}                className={cn(                  "relative flex flex-col items-center rounded-lg border p-4 text-center transition-colors",                  selected === template.id                    ? "border-primary bg-primary/5"                    : "hover:bg-muted"                )}              >                {template.badge && (                  <Badge variant="secondary" className="absolute -top-2 right-2 text-xs">                    {template.badge}                  </Badge>                )}                <Icon className="h-8 w-8 text-muted-foreground mb-2" />                <p className="text-sm font-medium">{template.name}</p>                <p className="text-xs text-muted-foreground">{template.description}</p>              </button>            );          })}        </div>        <DialogFooter>          <Button variant="outline" onClick={() => setOpen(false)}>            Cancel          </Button>          <Button onClick={handleSelect} disabled={isLoading}>            {isLoading ? (              <>                <Loader2 className="mr-2 h-4 w-4 animate-spin" />                Loading...              </>            ) : (              "Use Template"            )}          </Button>        </DialogFooter>      </DialogContent>    </Dialog>  );}