"use client";import { useState } from "react";import { Wifi, Lock, Check, Loader2 } 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 { cn } from "@/lib/utils";const networks = [  { ssid: "Home Network", signal: 3, secured: true },  { ssid: "Office_5G", signal: 2, secured: true },  { ssid: "Guest WiFi", signal: 2, secured: false },];export const title = "React Dialog Block WiFi Connect";export default function DialogWifiConnect() {  const [open, setOpen] = useState(false);  const [selected, setSelected] = useState<string | null>(null);  const [password, setPassword] = useState("");  const [connecting, setConnecting] = useState(false);  const [connected, setConnected] = useState(false);  const selectedNetwork = networks.find((n) => n.ssid === selected);  const handleConnect = async () => {    setConnecting(true);    await new Promise((r) => setTimeout(r, 1500));    setConnecting(false);    setConnected(true);  };  const handleClose = () => {    setOpen(false);    setTimeout(() => {      setSelected(null);      setPassword("");      setConnecting(false);      setConnected(false);    }, 200);  };  const SignalBars = ({ strength }: { strength: number }) => (    <div className="flex items-end gap-0.5 h-4">      {[1, 2, 3].map((bar) => (        <div          key={bar}          className={cn(            "w-1 rounded-sm",            bar === 1 && "h-1.5",            bar === 2 && "h-2.5",            bar === 3 && "h-4",            bar <= strength ? "bg-foreground" : "bg-muted"          )}        />      ))}    </div>  );  return (    <Dialog open={open} onOpenChange={setOpen}>      <div className="flex min-h-[350px] items-center justify-center">        <DialogTrigger asChild>          <Button variant="outline">            <Wifi className="mr-2 h-4 w-4" />            Connect WiFi          </Button>        </DialogTrigger>      </div>      <DialogContent style={{ maxWidth: "384px" }}>        {connected ? (          <div className="flex flex-col items-center justify-center py-6 text-center">            <Check className="h-8 w-8 text-primary" />            <h3 className="mt-4 text-lg font-medium">Connected</h3>            <p className="mt-1 text-sm text-muted-foreground">{selected}</p>            <Button onClick={handleClose} className="mt-6">              Done            </Button>          </div>        ) : (          <>            <DialogHeader>              <DialogTitle>Connect to WiFi</DialogTitle>              <DialogDescription>                Select a network to connect              </DialogDescription>            </DialogHeader>            <div className="py-4 space-y-4">              {/* Networks */}              <div className="space-y-1">                {networks.map((network) => (                  <button                    key={network.ssid}                    onClick={() => setSelected(network.ssid)}                    className={cn(                      "w-full flex items-center justify-between p-3 rounded-md transition-colors",                      selected === network.ssid                        ? "bg-primary/5 border border-primary"                        : "hover:bg-muted border border-transparent"                    )}                  >                    <div className="flex items-center gap-2">                      {network.secured && (                        <Lock className="h-3 w-3 text-muted-foreground" />                      )}                      <span className="text-sm">{network.ssid}</span>                    </div>                    <SignalBars strength={network.signal} />                  </button>                ))}              </div>              {/* Password */}              {selected && selectedNetwork?.secured && (                <div className="space-y-2">                  <Label htmlFor="password" className="text-sm">                    Password                  </Label>                  <Input                    id="password"                    type="password"                    value={password}                    onChange={(e) => setPassword(e.target.value)}                    placeholder="Enter network password"                  />                </div>              )}            </div>            <DialogFooter>              <Button variant="outline" onClick={handleClose}>                Cancel              </Button>              <Button                onClick={handleConnect}                disabled={                  !selected ||                  (selectedNetwork?.secured && !password) ||                  connecting                }              >                {connecting ? (                  <Loader2 className="h-4 w-4 animate-spin" />                ) : (                  "Connect"                )}              </Button>            </DialogFooter>          </>        )}      </DialogContent>    </Dialog>  );}