'use client'

import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Trash2, Edit, CheckSquare } from 'lucide-react'

interface BulkActionsProps {
  selectedCount: number
  onBulkDelete?: () => void
  onBulkEdit?: () => void
  actions?: Array<{
    label: string
    onClick: () => void
    icon?: React.ReactNode
  }>
}

export function BulkActions({
  selectedCount,
  onBulkDelete,
  onBulkEdit,
  actions = [],
}: BulkActionsProps) {
  if (selectedCount === 0) return null

  return (
    <div className="flex items-center gap-4 p-4 bg-studio-medium/20 border border-studio-medium rounded-lg">
      <div className="flex items-center gap-2">
        <CheckSquare className="h-4 w-4 text-studio-light" />
        <Badge variant="outline">{selectedCount} selected</Badge>
      </div>
      <div className="flex gap-2">
        {onBulkEdit && (
          <Button size="sm" variant="outline" onClick={onBulkEdit}>
            <Edit className="h-4 w-4 mr-2" />
            Edit
          </Button>
        )}
        {onBulkDelete && (
          <Button size="sm" variant="destructive" onClick={onBulkDelete}>
            <Trash2 className="h-4 w-4 mr-2" />
            Delete
          </Button>
        )}
        {actions.map((action, idx) => (
          <Button key={idx} size="sm" variant="outline" onClick={action.onClick}>
            {action.icon}
            {action.label}
          </Button>
        ))}
      </div>
    </div>
  )
}

