"use client";import { useState } from "react";import { Heart, Check } from "lucide-react";import { Button } from "@/components/ui/button";import {  Dialog,  DialogContent,  DialogDescription,  DialogFooter,  DialogHeader,  DialogTitle,  DialogTrigger,} from "@/components/ui/dialog";import { Textarea } from "@/components/ui/textarea";import { cn } from "@/lib/utils";const moods = [  { emoji: "😢", label: "Sad", value: 1 },  { emoji: "😕", label: "Down", value: 2 },  { emoji: "😐", label: "Okay", value: 3 },  { emoji: "🙂", label: "Good", value: 4 },  { emoji: "😄", label: "Great", value: 5 },];export const title = "React Dialog Block Mood Check";export default function DialogMoodCheck() {  const [open, setOpen] = useState(false);  const [selected, setSelected] = useState<number | null>(null);  const [note, setNote] = useState("");  const [saved, setSaved] = useState(false);  const handleSave = () => {    if (!selected) return;    setSaved(true);  };  const handleClose = () => {    setOpen(false);    setTimeout(() => {      setSelected(null);      setNote("");      setSaved(false);    }, 200);  };  const selectedMood = moods.find((m) => m.value === selected);  return (    <Dialog open={open} onOpenChange={setOpen}>      <div className="flex min-h-[350px] items-center justify-center">        <DialogTrigger asChild>          <Button variant="outline">            <Heart className="mr-2 h-4 w-4" />            Mood Check          </Button>        </DialogTrigger>      </div>      <DialogContent style={{ maxWidth: "384px" }}>        {saved ? (          <div className="flex flex-col items-center justify-center py-6 text-center">            <span className="text-5xl">{selectedMood?.emoji}</span>            <h3 className="mt-4 text-lg font-medium">Mood Logged</h3>            <p className="mt-1 text-sm text-muted-foreground">              Feeling {selectedMood?.label.toLowerCase()} today            </p>            <Button onClick={handleClose} className="mt-6">              Done            </Button>          </div>        ) : (          <>            <DialogHeader>              <DialogTitle>How are you feeling?</DialogTitle>              <DialogDescription>                Track your mood to spot patterns              </DialogDescription>            </DialogHeader>            <div className="py-4 space-y-4">              {/* Mood scale */}              <div className="flex justify-between">                {moods.map((mood) => (                  <button                    key={mood.value}                    onClick={() => setSelected(mood.value)}                    className={cn(                      "flex flex-col items-center gap-1 p-2 rounded-md transition-colors",                      selected === mood.value                        ? "bg-primary/10"                        : "hover:bg-muted"                    )}                  >                    <span className="text-2xl">{mood.emoji}</span>                    <span className="text-xs text-muted-foreground">                      {mood.label}                    </span>                  </button>                ))}              </div>              {/* Note */}              <Textarea                placeholder="Add a note (optional)"                value={note}                onChange={(e) => setNote(e.target.value)}                className="resize-none h-20"              />            </div>            <DialogFooter>              <Button variant="outline" onClick={handleClose}>                Skip              </Button>              <Button onClick={handleSave} disabled={!selected}>                Save              </Button>            </DialogFooter>          </>        )}      </DialogContent>    </Dialog>  );}