"use client";

import { clsx } from "clsx";

interface BatchAction {
  label: string;
  onClick: () => void;
  variant?: "default" | "danger";
  disabled?: boolean;
}

interface BatchActionBarProps {
  count: number;
  actions: BatchAction[];
  onClear: () => void;
}

export function BatchActionBar({ count, actions, onClear }: BatchActionBarProps) {
  if (count === 0) return null;

  return (
    <div className="fixed bottom-6 left-72 right-6 z-40 flex items-center gap-4 bg-gray-900 text-white px-5 py-3 rounded-xl shadow-2xl border border-gray-700">
      <span className="text-sm font-medium shrink-0">
        {count} selected
      </span>
      <div className="flex items-center gap-2 flex-1">
        {actions.map((action) => (
          <button
            key={action.label}
            type="button"
            onClick={action.onClick}
            disabled={action.disabled}
            className={clsx(
              "px-3 py-1.5 text-sm font-medium rounded-lg transition-colors disabled:opacity-50",
              action.variant === "danger"
                ? "bg-red-600 hover:bg-red-700 text-white"
                : "bg-white/10 hover:bg-white/20 text-white",
            )}
          >
            {action.label}
          </button>
        ))}
      </div>
      <button
        type="button"
        onClick={onClear}
        className="text-sm text-gray-400 hover:text-white transition-colors"
      >
        Clear
      </button>
    </div>
  );
}