"use client";

import { Info } from "lucide-react";

import { DataTableRefreshButton } from "@/app/dashboard/_components/data-table";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";

export function PaymentGatewaysHeaderActions({
  isRefreshing,
  onRefresh,
}: {
  isRefreshing?: boolean;
  onRefresh?: () => void;
}) {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <DataTableRefreshButton isRefreshing={isRefreshing} onRefresh={onRefresh} />
      <Dialog>
        <DialogTrigger asChild>
          <Button variant="outline" size="sm" className="gap-1.5">
            <Info className="size-4" />
            Info
          </Button>
        </DialogTrigger>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>Payment gateways</DialogTitle>
            <DialogDescription>
              Payment gateways are implemented as extensions. Enable them from the extensions
              area first, then manage their status and settings from this list.
            </DialogDescription>
          </DialogHeader>
        </DialogContent>
      </Dialog>
    </div>
  );
}