"use client";import { useState } from "react";import { Flag, Check } 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 { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";import { Textarea } from "@/components/ui/textarea";const reportReasons = [  { value: "spam", label: "Spam or misleading" },  { value: "harassment", label: "Harassment or bullying" },  { value: "hate", label: "Hate speech or symbols" },  { value: "violence", label: "Violence or dangerous content" },  { value: "inappropriate", label: "Nudity or sexual content" },  { value: "misinformation", label: "False information" },  { value: "other", label: "Other" },];export const title = "React Dialog Block Report Content";export default function DialogReportContent() {  const [open, setOpen] = useState(false);  const [reason, setReason] = useState("");  const [details, setDetails] = useState("");  const [submitted, setSubmitted] = useState(false);  const handleSubmit = () => {    console.log({ reason, details });    setSubmitted(true);  };  const handleClose = () => {    setOpen(false);    setTimeout(() => {      setSubmitted(false);      setReason("");      setDetails("");    }, 200);  };  return (    <Dialog open={open} onOpenChange={setOpen}>      <div className="flex min-h-[350px] items-center justify-center">        <DialogTrigger asChild>          <Button variant="outline">            <Flag className="mr-2 h-4 w-4" />            Report          </Button>        </DialogTrigger>      </div>      <DialogContent className="sm:max-w-sm">        {submitted ? (          <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">Report Submitted</h3>            <p className="mt-2 text-sm text-muted-foreground">              Thanks for helping keep our community safe.            </p>            <Button onClick={handleClose} className="mt-6">              Done            </Button>          </div>        ) : (          <>            <DialogHeader>              <DialogTitle>Report Content</DialogTitle>              <DialogDescription>                Why are you reporting this?              </DialogDescription>            </DialogHeader>            <div className="space-y-4 py-4">              <RadioGroup value={reason} onValueChange={setReason}>                {reportReasons.map((option) => (                  <div key={option.value} className="flex items-center space-x-3">                    <RadioGroupItem value={option.value} id={option.value} />                    <Label                      htmlFor={option.value}                      className="text-sm font-normal cursor-pointer"                    >                      {option.label}                    </Label>                  </div>                ))}              </RadioGroup>              <div className="space-y-2">                <Label htmlFor="details">Additional details (optional)</Label>                <Textarea                  id="details"                  placeholder="Provide any additional context..."                  value={details}                  onChange={(e) => setDetails(e.target.value)}                  className="min-h-[80px] resize-none"                />              </div>            </div>            <DialogFooter>              <Button variant="outline" onClick={handleClose}>                Cancel              </Button>              <Button                variant="destructive"                onClick={handleSubmit}                disabled={!reason}              >                Submit              </Button>            </DialogFooter>          </>        )}      </DialogContent>    </Dialog>  );}