"use client"

import { Loader2, Plus, RefreshCw } from "lucide-react"
import Link from "next/link"

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

export type XmlApiCreateRefreshToolbarProps = {
  /** List route; the Create button links to `${listHref}/create`. */
  listHref: string
  isRefreshing?: boolean
  onRefresh: () => void
  /**
   * Rendered before the Create button — asset-xml-upload uses it for its
   * per-bank list filters. The slot is why this is one component rather than
   * two: without it, that module would have kept its own copy of the shell.
   */
  leadingActions?: React.ReactNode
}

/**
 * Create + Refresh toolbar for xml-apis list pages.
 *
 * The sibling `XmlApiRefreshToolbar` covers refresh-only pages; this covers the
 * pages that also create. Three modules (account, xrate, asset) each carried a
 * byte-identical copy of this markup, differing only in a `listHref` constant.
 */
export function XmlApiCreateRefreshToolbar({
  listHref,
  isRefreshing,
  onRefresh,
  leadingActions,
}: XmlApiCreateRefreshToolbarProps) {
  return (
    <div className="flex flex-wrap items-center gap-2 sm:justify-end">
      {leadingActions}

      <Button {...TABLE_TOOLBAR_BTN} asChild>
        <Link href={`${listHref}/create`}>
          <Plus className="size-4" />
          Create new
        </Link>
      </Button>

      <Button
        {...TABLE_TOOLBAR_BTN_OUTLINE}
        onClick={onRefresh}
        disabled={isRefreshing}
      >
        {isRefreshing ? (
          <Loader2 className="size-4 animate-spin" />
        ) : (
          <RefreshCw className="size-4" />
        )}
        Refresh
      </Button>
    </div>
  )
}