"use client";

import { Loader2, X } from "lucide-react";
import { Button } from "@/components/ui/button";

interface Action {
  label: string;
  onClick: () => void;
  loading?: boolean;
  variant?: "default" | "destructive" | "outline" | "secondary";
}

export function BulkActionBar({
  count,
  actions,
  onClear,
}: {
  count: number;
  actions: Action[];
  onClear: () => void;
}) {
  if (count === 0) return null;

  return (
    <div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-50 flex items-center gap-3 bg-slate-900 text-white px-5 py-3 rounded-2xl shadow-2xl border border-slate-700 animate-in slide-in-from-bottom-4 duration-200">
      <span className="text-sm font-semibold text-slate-200 whitespace-nowrap">
        {count} selected
      </span>
      <div className="w-px h-5 bg-slate-700" />
      {actions.map((a) => (
        <Button
          key={a.label}
          size="sm"
          variant={a.variant ?? "secondary"}
          onClick={a.onClick}
          disabled={a.loading}
          className="gap-1.5"
        >
          {a.loading && <Loader2 className="h-3.5 w-3.5 animate-spin" />}
          {a.label}
        </Button>
      ))}
      <button
        onClick={onClear}
        className="ml-1 text-slate-400 hover:text-white transition-colors"
        title="Clear selection"
      >
        <X className="h-4 w-4" />
      </button>
    </div>
  );
}