"use client"

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

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

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

export function AllBanksToolbar({
  isRefreshing,
  onRefresh,
}: AllBanksToolbarProps) {
  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>
  )
}