"use client";

import * as React from "react";
import { useRouter } from "next/navigation";
import { RefreshCw } from "lucide-react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

export function RefreshButton({ className, label }: { className?: string; label?: string }) {
  const router = useRouter();
  const [spinning, setSpinning] = React.useState(false);
  const [pending, startTransition] = React.useTransition();
  return (
    <Button
      variant="ghost"
      size={label ? "sm" : "iconSm"}
      className={cn("text-fg-muted", className)}
      aria-label="Refresh"
      onClick={() => {
        setSpinning(true);
        startTransition(() => router.refresh());
        setTimeout(() => setSpinning(false), 800);
      }}
    >
      <RefreshCw className={cn((spinning || pending) && "animate-spin")} />
      {label}
    </Button>
  );
}