"use client"

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

import { Button } from "@/components/ui/button"
import { TABLE_TOOLBAR_BTN_OUTLINE } from "@/components/shared/table-ui"

export type XmlApiRefreshToolbarProps = {
  isRefreshing?: boolean
  onRefresh: () => void
}

/** Refresh-only toolbar shared by xml-apis list pages that have no other bulk actions. */
export function XmlApiRefreshToolbar({ isRefreshing, onRefresh }: XmlApiRefreshToolbarProps) {
  return (
    <div className="flex flex-wrap items-center gap-2 sm:justify-end">
      <Button {...TABLE_TOOLBAR_BTN_OUTLINE} onClick={onRefresh} disabled={isRefreshing}>
        {isRefreshing ? (
          <Loader2 className="size-4 animate-spin" />
        ) : (
          <RefreshCw className="size-4" />
        )}
        Refresh
      </Button>
    </div>
  )
}