// @design-system: domain/admin/AdminTable/BulkActionBar

'use client';

import { cn } from '@/lib/cn';
import { Button } from '@/components/ui/primitives/Button';
import type { BulkActionDef } from './AdminTable';

export interface BulkActionBarProps {
  count: number;
  selectedLabel: string;
  actions: BulkActionDef[];
  onClear: () => void;
  clearLabel: string;
  className?: string;
}

export function BulkActionBar({
  count,
  selectedLabel,
  actions,
  onClear,
  clearLabel,
  className,
}: BulkActionBarProps) {
  return (
    <div
      role="toolbar"
      aria-label={selectedLabel}
      className={cn(
        'bg-surface-raised border-border-default flex flex-wrap items-center gap-3 rounded-lg border px-4 py-2',
        className,
      )}
    >
      <span className="text-text-primary text-sm font-medium" aria-live="polite">
        {selectedLabel.replace('{n}', String(count))}
      </span>
      <div className="flex flex-wrap items-center gap-2">
        {actions.map((action) => (
          <Button
            key={action.key}
            type="button"
            size="sm"
            variant={action.variant === 'danger' ? 'danger' : 'secondary'}
            onClick={action.onClick}
          >
            {action.label}
          </Button>
        ))}
      </div>
      <Button type="button" size="sm" variant="ghost" className="ms-auto" onClick={onClear}>
        {clearLabel}
      </Button>
    </div>
  );
}