"use client";import { useState } from "react";import { Trophy, Share2, Sparkles } from "lucide-react";import { Button } from "@/components/ui/button";import {  Dialog,  DialogContent,  DialogTitle,  DialogTrigger,} from "@/components/ui/dialog";import { Badge } from "@/components/ui/badge";const achievement = {  title: "Early Adopter",  description: "Joined within the first month of launch",  rarity: "Rare",  unlocked: "2.3%",  icon: "🏆",  xp: 500,};export const title = "React Dialog Block Achievement Unlock";export default function DialogAchievementUnlock() {  const [open, setOpen] = useState(false);  const [shared, setShared] = useState(false);  const handleShare = () => {    setShared(true);    setTimeout(() => setShared(false), 2000);  };  return (    <Dialog open={open} onOpenChange={setOpen}>      <div className="flex min-h-[350px] items-center justify-center">        <DialogTrigger asChild>          <Button variant="outline">            <Trophy className="mr-2 h-4 w-4" />            View Achievement          </Button>        </DialogTrigger>      </div>      <DialogContent style={{ maxWidth: "320px" }} className="text-center">        <DialogTitle className="sr-only">Achievement Unlocked</DialogTitle>        <div className="py-6 space-y-4">          {/* Badge icon */}          <div className="flex flex-col items-center">            <div className="relative">              <div className="h-24 w-24 rounded-full bg-primary/10 flex items-center justify-center">                <span className="text-5xl">{achievement.icon}</span>              </div>              <Sparkles className="absolute -top-1 -right-1 h-6 w-6 text-primary" />            </div>          </div>          {/* Title and description */}          <div>            <div className="flex items-center justify-center gap-2">              <h3 className="text-lg font-semibold">{achievement.title}</h3>              <Badge variant="secondary" className="text-xs">                {achievement.rarity}              </Badge>            </div>            <p className="text-sm text-muted-foreground mt-1">              {achievement.description}            </p>          </div>          {/* Stats */}          <div className="flex justify-center gap-6 py-2">            <div className="text-center">              <p className="text-lg font-semibold text-primary">+{achievement.xp}</p>              <p className="text-xs text-muted-foreground">XP Earned</p>            </div>            <div className="text-center">              <p className="text-lg font-semibold">{achievement.unlocked}</p>              <p className="text-xs text-muted-foreground">Have This</p>            </div>          </div>          {/* Actions */}          <div className="flex gap-2 pt-2">            <Button              variant="outline"              className="flex-1"              onClick={handleShare}            >              {shared ? (                "Copied!"              ) : (                <>                  <Share2 className="mr-2 h-4 w-4" />                  Share                </>              )}            </Button>            <Button className="flex-1" onClick={() => setOpen(false)}>              Awesome!            </Button>          </div>        </div>      </DialogContent>    </Dialog>  );}