'use client';

import { Button } from '@/ui/Button';
import { BulkActions } from '@/ui/BulkActions';
import React from 'react';

interface BulkActionBarProps {
  selectedCount: number;
  actions: {
    label: string;
    onClick: () => void;
    variant?: 'primary' | 'secondary' | 'danger';
    icon?: React.ReactNode;
  }[];
  onClearSelection: () => void;
}

/**
 * BulkActionBar
 * 
 * Floating action bar that appears when items are selected in a table.
 */
export function BulkActionBar({
  selectedCount,
  actions,
  onClearSelection
}: BulkActionBarProps) {
  return (
    <BulkActions
      selectedCount={selectedCount}
      isOpen={selectedCount > 0}
    >
      {actions.map((action) => (
        <Button
          key={action.label}
          size="sm"
          variant={action.variant === 'danger' ? 'danger' : (action.variant || 'primary')}
          onClick={action.onClick}
          icon={action.icon}
        >
          {action.label}
        </Button>
      ))}
      <Button
        size="sm"
        variant="ghost"
        onClick={onClearSelection}
      >
        Cancel
      </Button>
    </BulkActions>
  );
}