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

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

export const DepositActions = ({ isLoading, onRefresh }: DepositActionsProps) => {
  const router = useRouter();

  const addOptions: DropdownOption[] = [
    {
      label: "Call Deposit",
      path: "/cash/deposit/calldeposit",
    },
    {
      label: "Fixed Deposit",
      path: "/cash/deposit/fixeddeposit",
    },
  ];

  const actionButtonClass = (disabled: boolean) =>
    disabled
      ? "inline-flex items-center gap-1 rounded-lg border border-gray-200 bg-gray-100 px-2 py-1 text-xs font-medium text-gray-500 shadow-sm transition-all duration-200 cursor-not-allowed"
      : "inline-flex items-center gap-1 rounded-lg border border-[#428B4D]/40 bg-white px-2 py-1 text-xs font-semibold text-slate-700 shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:border-[#428B4D] hover:bg-[#428B4D] hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-[#428B4D]/40 active:scale-95";

  return (
    <>
      <DropdownButton
        options={addOptions}
        buttonLabel={isLoading ? "Loading..." : "Add Deposit"}
        icon={<Plus size={16} />}
        className="text-xs"
      />
      <button
        onClick={onRefresh}
        disabled={isLoading}
        className={actionButtonClass(isLoading)}
      >
        <RefreshCw size={16} className={isLoading ? "animate-spin" : ""} />
        {isLoading ? "Refreshing..." : "Refresh"}
      </button>
    </>
  );
};