"use client";

import { useState } from "react"

import { Spinner } from "./spinner"

export function SpinnerDemo() {

const [status, setStatus] = useState<"loading" | "success">("loading")

return (

<div className="flex flex-col items-center justify-center min-h-[400px] gap-8 bg-zinc-50 dark:bg-black p-8">

<div className="flex items-center gap-3">

<Spinner status={status} size={22} />

<div className="flex flex-col">

<span className="text-[14px] font-semibold text-zinc-900 dark:text-zinc-100 leading-none">Deploy to production</span>

<span className="text-[13px] text-zinc-500 mt-1">4 steps</span>

</div>

</div>

<button

onClick={() => setStatus(s => s === "loading" ? "success" : "loading")}

className="px-5 py-1.5 rounded-full text-[13px] font-medium bg-zinc-200/50 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 hover:bg-zinc-200 dark:hover:bg-zinc-700 transition-colors"

>

{status === "loading" ? "Complete" : "Back to loading"}

</button>

</div>

)

}