'use client';

/**
 * BulkActions Component
 *
 * Actions bar for bulk operations on selected issues.
 *
 * @module features/issues/components/BulkActions
 */

import { Trash2 } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Separator } from '@/components/ui/separator';
import { cn } from '@/lib/utils';

interface BulkActionsProps {
  selectedCount: number;
  onChangeStatus: () => void;
  onAssign: () => void;
  onAddLabels: () => void;
  onDelete: () => void;
  className?: string;
}

export function BulkActions({
  selectedCount,
  onChangeStatus,
  onAssign,
  onAddLabels,
  onDelete,
  className,
}: BulkActionsProps) {
  if (selectedCount === 0) return null;

  return (
    <div
      className={cn(
        'flex items-center gap-4 rounded-lg border bg-muted/50 p-3',
        className
      )}
      role="toolbar"
      aria-label="Bulk actions for selected issues"
    >
      <span className="text-sm font-medium">
        {selectedCount} selected
      </span>
      <Separator orientation="vertical" className="h-6" />
      <div className="flex gap-2">
        <Button variant="outline" size="sm" onClick={onChangeStatus}>
          Change Status
        </Button>
        <Button variant="outline" size="sm" onClick={onAssign}>
          Assign
        </Button>
        <Button variant="outline" size="sm" onClick={onAddLabels}>
          Add Labels
        </Button>
        <Button
          variant="outline"
          size="sm"
          className="text-destructive hover:text-destructive"
          onClick={onDelete}
        >
          <Trash2 className="mr-2 h-4 w-4" aria-hidden="true" />
          Delete
        </Button>
      </div>
    </div>
  );
}