import { Space, Button } from 'antd';
import type { ReactNode } from 'react';

interface BulkAction {
  key: string;
  label: string;
  icon?: ReactNode;
  onClick: () => void;
  danger?: boolean;
  type?: 'primary' | 'default';
}

interface BulkActionsBarProps {
  selectedCount: number;
  actions: BulkAction[];
}

export default function BulkActionsBar({ selectedCount, actions }: BulkActionsBarProps) {
  if (selectedCount === 0) return null;

  return (
    <div
      style={{
        position: 'fixed',
        bottom: 24,
        left: '50%',
        transform: 'translateX(-50%)',
        background: '#1f1f1f',
        border: '1px solid #434343',
        borderRadius: 8,
        padding: '12px 24px',
        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.5)',
        zIndex: 1000,
      }}
    >
      <Space size="middle">
        <span style={{ fontWeight: 500 }}>{selectedCount} selected</span>
        {actions.map((action) => (
          <Button
            key={action.key}
            type={action.type}
            danger={action.danger}
            icon={action.icon}
            onClick={action.onClick}
          >
            {action.label}
          </Button>
        ))}
      </Space>
    </div>
  );
}
