Dynamic Button

"use client";

import { CheckCircleIcon, FloppyDiskIcon } from "@phosphor-icons/react";
import { useRef, useState } from "react";
import { DynamicButton } from "@/components/ui/dynamic-button";

export default function SavePrimary() {
  const [done, setDone] = useState(false);
  const timerRef = useRef<number | null>(null);
  const Icon = done ? CheckCircleIcon : FloppyDiskIcon;

  function handleClick() {
    setDone(true);
    if (timerRef.current !== null) {
      window.clearTimeout(timerRef.current);
    }
    timerRef.current = window.setTimeout(() => {
      setDone(false);
      timerRef.current = null;
    }, 1200);
  }

  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-white p-8">
      <DynamicButton
        variant="primary"
        icon={
          <Icon
            aria-hidden="true"
            className={done ? "text-green-500" : undefined}
            size={15}
            weight={done ? "fill" : "bold"}
          />
        }
        onClick={handleClick}
        stateKey={done ? "done" : "save"}
        type="button"
      >
        Save
      </DynamicButton>
    </div>
  );
}