'use client';

/* ════════════════════════════ BatchBar ════════════════════════════
 * Floating "N selected" action bar voor batch operaties.
 * Verschijnt onderaan zodra >= 1 item geselecteerd is.
 */

import { Trash2, Download, X } from 'lucide-react';

export interface BatchAction {
  key: string;
  label: string;
  icon?: React.ReactNode;
  variant?: 'danger' | 'default';
  onClick: () => void;
}

interface BatchBarProps {
  count: number;
  actions: BatchAction[];
  onClear: () => void;
  label?: string;
}

export default function BatchBar({ count, actions, onClear, label = 'geselecteerd' }: BatchBarProps) {
  if (count === 0) return null;

  return (
    <div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-50 animate-slide-up">
      <div className="flex items-center gap-3 px-4 py-3 rounded-xl bg-surface-800 border border-surface-700 shadow-xl shadow-black/30">
        {/* Count badge */}
        <span className="text-sm text-surface-200 font-medium whitespace-nowrap">
          <span className="text-brand-400">{count}</span> {label}
        </span>

        <div className="w-px h-5 bg-surface-700" />

        {/* Actions */}
        <div className="flex items-center gap-2">
          {actions.map((action) => (
            <button
              key={action.key}
              onClick={action.onClick}
              className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors ${
                action.variant === 'danger'
                  ? 'bg-accent-rose/10 text-accent-rose hover:bg-accent-rose/20'
                  : 'bg-brand-500/10 text-brand-400 hover:bg-brand-500/20'
              }`}
            >
              {action.icon}
              {action.label}
            </button>
          ))}
        </div>

        {/* Close */}
        <button
          onClick={onClear}
          className="p-1.5 rounded-lg text-surface-500 hover:text-surface-300 hover:bg-surface-700 transition-colors"
          aria-label="Deselecteer alles"
        >
          <X className="w-4 h-4" />
        </button>
      </div>
    </div>
  );
}