"use client";

import { useState, useEffect } from "react"

import { motion, AnimatePresence } from "framer-motion"

import { Check, Loader2 } from "lucide-react"

import { Button } from "./button"

export function ButtonDemo() {

const [state, setState] = useState<"idle" | "loading" | "success">("idle")

const handleClick = () => {

if (state === "idle") setState("loading")

else if (state === "loading") setState("success")

else if (state === "success") setState("idle")

}

return (

<div className="w-full h-full flex items-center justify-center p-8">

<Button

onClick={handleClick}

className="min-w-[125px] overflow-hidden"

>

<AnimatePresence mode="wait">

{state === "idle" && (

<motion.span key="idle" initial={{ opacity: 0, y: 15 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -15 }} transition={{ duration: 0.2 }}>

Label

</motion.span>

)}

{state === "loading" && (

<motion.span key="loading" initial={{ opacity: 0, y: 15 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -15 }} transition={{ duration: 0.2 }} className="flex items-center justify-center gap-2 text-zinc-400 dark:text-zinc-600">

<Loader2 className="w-3.5 h-3.5 animate-spin" />

<span>Saving...</span>

</motion.span>

)}

{state === "success" && (

<motion.span key="success" initial={{ opacity: 0, y: 15 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -15 }} transition={{ duration: 0.2 }} className="flex items-center justify-center gap-2">

<Check className="w-4 h-4" strokeWidth={2.5} />

<span>Success</span>

</motion.span>

)}

</AnimatePresence>

</Button>

</div>

)

}