"use client";import { useState } from "react";import { Calendar, Clock, MapPin, Check, X, HelpCircle } from "lucide-react";import { Button } from "@/components/ui/button";import {  Dialog,  DialogContent,  DialogFooter,  DialogHeader,  DialogTitle,  DialogTrigger,} from "@/components/ui/dialog";import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";import { Label } from "@/components/ui/label";import { Textarea } from "@/components/ui/textarea";import { cn } from "@/lib/utils";const meeting = {  title: "Q4 Planning Review",  date: "Tuesday, Dec 17",  time: "2:00 PM - 3:00 PM",  location: "Conference Room A",  organizer: "Sarah Chen",};const responses = [  { value: "accept", label: "Accept", icon: Check },  { value: "tentative", label: "Maybe", icon: HelpCircle },  { value: "decline", label: "Decline", icon: X },];export const title = "React Dialog Block Meeting RSVP";export default function DialogMeetingRsvp() {  const [open, setOpen] = useState(false);  const [response, setResponse] = useState<string | null>(null);  const [message, setMessage] = useState("");  const [submitted, setSubmitted] = useState(false);  const handleSubmit = () => {    if (!response) return;    setSubmitted(true);  };  const handleClose = () => {    setOpen(false);    setTimeout(() => {      setResponse(null);      setMessage("");      setSubmitted(false);    }, 200);  };  const selectedResponse = responses.find((r) => r.value === response);  return (    <Dialog open={open} onOpenChange={setOpen}>      <div className="flex min-h-[350px] items-center justify-center">        <DialogTrigger asChild>          <Button variant="outline">            <Calendar className="mr-2 h-4 w-4" />            RSVP to Meeting          </Button>        </DialogTrigger>      </div>      <DialogContent style={{ maxWidth: "384px" }}>        {submitted ? (          <div className="flex flex-col items-center justify-center py-6 text-center">            {selectedResponse && (              <selectedResponse.icon className="h-8 w-8 text-primary" />            )}            <h3 className="mt-4 text-lg font-medium">              {response === "accept" && "You're attending"}              {response === "tentative" && "Marked as maybe"}              {response === "decline" && "Declined"}            </h3>            <p className="mt-1 text-sm text-muted-foreground">              {meeting.organizer} has been notified            </p>            <Button onClick={handleClose} className="mt-6">              Done            </Button>          </div>        ) : (          <>            <DialogHeader>              <DialogTitle>{meeting.title}</DialogTitle>            </DialogHeader>            <div className="py-4 space-y-4">              {/* Meeting details */}              <div className="space-y-2 text-sm">                <div className="flex items-center gap-2 text-muted-foreground">                  <Calendar className="h-4 w-4" />                  {meeting.date}                </div>                <div className="flex items-center gap-2 text-muted-foreground">                  <Clock className="h-4 w-4" />                  {meeting.time}                </div>                <div className="flex items-center gap-2 text-muted-foreground">                  <MapPin className="h-4 w-4" />                  {meeting.location}                </div>              </div>              {/* Response options */}              <RadioGroup value={response || ""} onValueChange={setResponse}>                <div className="grid grid-cols-3 gap-2">                  {responses.map((option) => (                    <Label                      key={option.value}                      htmlFor={option.value}                      className={cn(                        "flex flex-col items-center gap-1 p-3 rounded-md border cursor-pointer transition-colors",                        response === option.value                          ? "border-primary bg-primary/5"                          : "hover:border-muted-foreground/50"                      )}                    >                      <RadioGroupItem                        value={option.value}                        id={option.value}                        className="sr-only"                      />                      <option.icon className="h-4 w-4" />                      <span className="text-xs">{option.label}</span>                    </Label>                  ))}                </div>              </RadioGroup>              {/* Optional message */}              <Textarea                placeholder="Add a note (optional)"                value={message}                onChange={(e) => setMessage(e.target.value)}                className="resize-none h-16"              />            </div>            <DialogFooter>              <Button variant="outline" onClick={handleClose}>                Cancel              </Button>              <Button onClick={handleSubmit} disabled={!response}>                Send Response              </Button>            </DialogFooter>          </>        )}      </DialogContent>    </Dialog>  );}