"use client";import { useState } from "react";import { Focus, Play } from "lucide-react";import { Button } from "@/components/ui/button";import {  Dialog,  DialogContent,  DialogDescription,  DialogFooter,  DialogHeader,  DialogTitle,  DialogTrigger,} from "@/components/ui/dialog";import { Switch } from "@/components/ui/switch";import { Label } from "@/components/ui/label";import { cn } from "@/lib/utils";const durations = [  { value: 25, label: "25 min" },  { value: 50, label: "50 min" },  { value: 90, label: "90 min" },];export const title = "React Dialog Block Focus Mode";export default function DialogFocusMode() {  const [open, setOpen] = useState(false);  const [duration, setDuration] = useState(25);  const [blockNotifs, setBlockNotifs] = useState(true);  const [started, setStarted] = useState(false);  const handleStart = () => {    setStarted(true);  };  const handleClose = () => {    setOpen(false);    setTimeout(() => setStarted(false), 200);  };  return (    <Dialog open={open} onOpenChange={setOpen}>      <div className="flex min-h-[350px] items-center justify-center">        <DialogTrigger asChild>          <Button variant="outline">            <Focus className="mr-2 h-4 w-4" />            Focus Mode          </Button>        </DialogTrigger>      </div>      <DialogContent style={{ maxWidth: "384px" }}>        {started ? (          <div className="flex flex-col items-center justify-center py-8 text-center">            <div className="h-16 w-16 rounded-full bg-primary/10 flex items-center justify-center">              <Focus className="h-8 w-8 text-primary" />            </div>            <h3 className="mt-4 text-lg font-medium">Focus Mode Active</h3>            <p className="mt-1 text-sm text-muted-foreground">              {duration} minute session started            </p>            <p className="text-xs text-muted-foreground mt-1">              {blockNotifs ? "Notifications blocked" : "Notifications enabled"}            </p>            <Button variant="outline" onClick={handleClose} className="mt-6">              End Session            </Button>          </div>        ) : (          <>            <DialogHeader>              <DialogTitle>Start Focus Session</DialogTitle>              <DialogDescription>                Block distractions and concentrate              </DialogDescription>            </DialogHeader>            <div className="py-4 space-y-4">              {/* Duration */}              <div className="space-y-2">                <Label className="text-sm">Duration</Label>                <div className="grid grid-cols-3 gap-2">                  {durations.map((d) => (                    <button                      key={d.value}                      onClick={() => setDuration(d.value)}                      className={cn(                        "py-2 rounded-md border text-sm font-medium transition-colors",                        duration === d.value                          ? "border-primary bg-primary/5"                          : "hover:border-muted-foreground/50"                      )}                    >                      {d.label}                    </button>                  ))}                </div>              </div>              {/* Settings */}              <div className="flex items-center justify-between">                <Label htmlFor="notifs" className="text-sm">                  Block notifications                </Label>                <Switch                  id="notifs"                  checked={blockNotifs}                  onCheckedChange={setBlockNotifs}                />              </div>            </div>            <DialogFooter>              <Button onClick={handleStart} className="w-full">                <Play className="mr-2 h-4 w-4" />                Start Focus              </Button>            </DialogFooter>          </>        )}      </DialogContent>    </Dialog>  );}