import { useMemo } from "react";
import { Plus, RefreshCw } from "lucide-react";
import DropdownButton, { DropdownOption } from "@/components/ui/DropdownButton";

interface CommodityDerivativeActionsProps {
  isLoading: boolean;
  onRefresh: () => void;
}

export function CommodityDerivativeActions({ isLoading, onRefresh }: CommodityDerivativeActionsProps) {
  const addOptions: DropdownOption[] = useMemo(
    () => [
      {
        label: "Accumulator",
        path: "/commodity/derivative/accumulator",
      },
      {
        label: "Options",
        path: "/commodity/derivative/option",
      },
    ],
    []
  );

  return (
    <>
      <DropdownButton
        options={addOptions}
        buttonLabel={isLoading ? "Loading..." : "Add Derivative"}
        icon={<Plus size={16} />}
        className="text-xs"
      />
      <button
        onClick={onRefresh}
        disabled={isLoading}
        className="flex items-center gap-2 rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
      >
        <RefreshCw size={16} className={isLoading ? "animate-spin" : ""} />
        {isLoading ? "Refreshing..." : "Refresh"}
      </button>
    </>
  );
}