"use client";import { useState } from "react";import { Star, Loader2 } from "lucide-react";import { Button } from "@/components/ui/button";import {  Dialog,  DialogContent,  DialogDescription,  DialogFooter,  DialogHeader,  DialogTitle,  DialogTrigger,} from "@/components/ui/dialog";import { Label } from "@/components/ui/label";import { Textarea } from "@/components/ui/textarea";import { cn } from "@/lib/utils";export const title = "React Dialog Block Review Submit";export default function DialogReviewSubmit() {  const [open, setOpen] = useState(false);  const [rating, setRating] = useState(0);  const [hoverRating, setHoverRating] = useState(0);  const [review, setReview] = useState("");  const [isSubmitting, setIsSubmitting] = useState(false);  const displayRating = hoverRating || rating;  const isValid = rating > 0 && review.length >= 10;  const handleSubmit = async () => {    if (!isValid) return;    setIsSubmitting(true);    await new Promise((resolve) => setTimeout(resolve, 1000));    setIsSubmitting(false);    setOpen(false);    setRating(0);    setReview("");  };  return (    <Dialog open={open} onOpenChange={setOpen}>      <div className="flex min-h-[350px] items-center justify-center">        <DialogTrigger asChild>          <Button variant="outline">            <Star className="mr-2 h-4 w-4" />            Write a Review          </Button>        </DialogTrigger>      </div>      <DialogContent className="sm:max-w-sm">        <DialogHeader>          <DialogTitle>Write a Review</DialogTitle>          <DialogDescription>            Share your experience to help others.          </DialogDescription>        </DialogHeader>        <div className="space-y-4 py-4">          <div className="space-y-2">            <Label>Rating</Label>            <div className="flex gap-1">              {[1, 2, 3, 4, 5].map((star) => (                <button                  key={star}                  type="button"                  onClick={() => setRating(star)}                  onMouseEnter={() => setHoverRating(star)}                  onMouseLeave={() => setHoverRating(0)}                  className="p-0.5"                >                  <Star                    className={cn(                      "h-7 w-7 transition-colors",                      star <= displayRating                        ? "fill-primary text-primary"                        : "text-muted-foreground/30"                    )}                  />                </button>              ))}            </div>          </div>          <div className="space-y-2">            <Label htmlFor="review-text">Your Review</Label>            <Textarea              id="review-text"              placeholder="What did you like or dislike?"              value={review}              onChange={(e) => setReview(e.target.value)}              className="min-h-[100px] resize-none"            />          </div>        </div>        <DialogFooter>          <Button variant="outline" onClick={() => setOpen(false)}>            Cancel          </Button>          <Button onClick={handleSubmit} disabled={!isValid || isSubmitting}>            {isSubmitting ? (              <>                <Loader2 className="mr-2 h-4 w-4 animate-spin" />                Submitting...              </>            ) : (              "Submit"            )}          </Button>        </DialogFooter>      </DialogContent>    </Dialog>  );}