"use client";import { useState } from "react";import { Flame, Check } from "lucide-react";import { Button } from "@/components/ui/button";import {  Dialog,  DialogContent,  DialogDescription,  DialogFooter,  DialogHeader,  DialogTitle,  DialogTrigger,} from "@/components/ui/dialog";import { cn } from "@/lib/utils";const weekDays = ["M", "T", "W", "T", "F", "S", "S"];const completedDays = [true, true, true, true, true, false, false];const currentStreak = 12;const todayIndex = 5;export const title = "React Dialog Block Streak Tracker";export default function DialogStreakTracker() {  const [open, setOpen] = useState(false);  const [checkedIn, setCheckedIn] = useState(false);  const handleCheckIn = () => {    setCheckedIn(true);  };  const handleClose = () => {    setOpen(false);    setTimeout(() => setCheckedIn(false), 200);  };  return (    <Dialog open={open} onOpenChange={setOpen}>      <div className="flex min-h-[350px] items-center justify-center">        <DialogTrigger asChild>          <Button variant="outline">            <Flame className="mr-2 h-4 w-4" />            View Streak          </Button>        </DialogTrigger>      </div>      <DialogContent style={{ maxWidth: "384px" }}>        {checkedIn ? (          <div className="flex flex-col items-center justify-center py-6 text-center">            <div className="text-5xl">🔥</div>            <h3 className="mt-4 text-lg font-medium">{currentStreak + 1} Day Streak!</h3>            <p className="mt-1 text-sm text-muted-foreground">              You're on fire. Keep it going!            </p>            <Button onClick={handleClose} className="mt-6">              Done            </Button>          </div>        ) : (          <>            <DialogHeader className="text-center">              <DialogTitle className="flex items-center justify-center gap-2">                <Flame className="h-5 w-5 text-primary" />                {currentStreak} Day Streak              </DialogTitle>              <DialogDescription>                Check in to keep your streak alive              </DialogDescription>            </DialogHeader>            <div className="py-6">              {/* Week grid */}              <div className="flex justify-between">                {weekDays.map((day, i) => {                  const isToday = i === todayIndex;                  const isCompleted = completedDays[i];                  const isFuture = i > todayIndex;                  return (                    <div key={i} className="flex flex-col items-center gap-2">                      <span className="text-xs text-muted-foreground">{day}</span>                      <div                        className={cn(                          "h-9 w-9 rounded-full flex items-center justify-center text-sm",                          isCompleted && "bg-primary text-primary-foreground",                          isToday && !isCompleted && "border-2 border-primary",                          isFuture && "bg-muted text-muted-foreground",                          !isCompleted && !isToday && !isFuture && "bg-muted"                        )}                      >                        {isCompleted ? (                          <Check className="h-4 w-4" />                        ) : (                          <span className={cn(isToday && "text-primary font-medium")}>                            {i + 1}                          </span>                        )}                      </div>                    </div>                  );                })}              </div>              {/* Milestone */}              <div className="mt-6 p-3 rounded-md border text-center">                <p className="text-xs text-muted-foreground">Next milestone</p>                <p className="font-medium">14 days</p>                <p className="text-xs text-muted-foreground">2 days to go</p>              </div>            </div>            <DialogFooter>              <Button onClick={handleCheckIn} className="w-full">                Check In Today              </Button>            </DialogFooter>          </>        )}      </DialogContent>    </Dialog>  );}