"use client";import { useState } from "react";import { Repeat, Check } from "lucide-react";import { Button } from "@/components/ui/button";import {  Dialog,  DialogContent,  DialogDescription,  DialogFooter,  DialogHeader,  DialogTitle,  DialogTrigger,} from "@/components/ui/dialog";import { Input } from "@/components/ui/input";import { Label } from "@/components/ui/label";import {  Select,  SelectContent,  SelectItem,  SelectTrigger,  SelectValue,} from "@/components/ui/select";const frequencies = [  { value: "weekly", label: "Weekly" },  { value: "monthly", label: "Monthly" },  { value: "quarterly", label: "Quarterly" },  { value: "annually", label: "Annually" },];export const title = "React Dialog Block Recurring Payment";export default function DialogRecurringPayment() {  const [open, setOpen] = useState(false);  const [saved, setSaved] = useState(false);  const [amount, setAmount] = useState("50.00");  const [frequency, setFrequency] = useState("monthly");  const handleSave = () => {    setSaved(true);  };  const handleClose = () => {    setOpen(false);    setTimeout(() => {      setSaved(false);      setAmount("50.00");      setFrequency("monthly");    }, 200);  };  if (saved) {    return (      <Dialog open={open} onOpenChange={setOpen}>        <div className="flex min-h-[350px] items-center justify-center">          <DialogTrigger asChild>            <Button variant="outline">              <Repeat className="mr-2 h-4 w-4" />              Set Up Auto-Pay            </Button>          </DialogTrigger>        </div>        <DialogContent className="sm:max-w-sm">          <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">Auto-Pay Enabled</h3>            <p className="mt-2 text-sm text-muted-foreground">              ${amount} will be charged {frequency}.            </p>            <Button onClick={handleClose} className="mt-6">              Done            </Button>          </div>        </DialogContent>      </Dialog>    );  }  return (    <Dialog open={open} onOpenChange={setOpen}>      <div className="flex min-h-[350px] items-center justify-center">        <DialogTrigger asChild>          <Button variant="outline">            <Repeat className="mr-2 h-4 w-4" />            Set Up Auto-Pay          </Button>        </DialogTrigger>      </div>      <DialogContent className="sm:max-w-sm">        <DialogHeader>          <DialogTitle>Set Up Auto-Pay</DialogTitle>          <DialogDescription>            Schedule automatic recurring payments.          </DialogDescription>        </DialogHeader>        <div className="space-y-4 py-4">          <div className="space-y-2">            <Label htmlFor="amount">Amount</Label>            <div className="relative">              <span className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground">                $              </span>              <Input                id="amount"                type="number"                value={amount}                onChange={(e) => setAmount(e.target.value)}                className="pl-7"                step="0.01"                min="0"              />            </div>          </div>          <div className="space-y-2">            <Label htmlFor="frequency">Frequency</Label>            <Select value={frequency} onValueChange={setFrequency}>              <SelectTrigger id="frequency">                <SelectValue />              </SelectTrigger>              <SelectContent>                {frequencies.map((f) => (                  <SelectItem key={f.value} value={f.value}>                    {f.label}                  </SelectItem>                ))}              </SelectContent>            </Select>          </div>          <div className="flex items-center justify-between rounded-lg border p-3">            <div>              <p className="text-sm font-medium">Visa •••• 4242</p>              <p className="text-xs text-muted-foreground">Expires 12/26</p>            </div>            <Button variant="ghost" size="sm" className="text-xs">              Change            </Button>          </div>        </div>        <DialogFooter>          <Button variant="outline" onClick={handleClose}>            Cancel          </Button>          <Button onClick={handleSave} disabled={!amount || parseFloat(amount) <= 0}>            Enable          </Button>        </DialogFooter>      </DialogContent>    </Dialog>  );}