'use client'

import { Trash2, X, CheckSquare } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { cn } from '@/lib/utils'

export function BulkActionBar({
  count,
  entityLabel,
  onDelete,
  onClear,
  className,
}: {
  count: number
  entityLabel: string
  onDelete: () => void
  onClear: () => void
  className?: string
}) {
  if (count === 0) return null

  return (
    <div
      className={cn(
        'fixed bottom-4 left-1/2 z-50 flex -translate-x-1/2 items-center gap-3 rounded-lg border border-border bg-background px-4 py-2.5 shadow-lg',
        className
      )}
    >
      <span className="flex items-center gap-1.5 text-sm font-medium">
        <CheckSquare className="size-4 text-muted-foreground" />
        {count} {count === 1 ? entityLabel : `${entityLabel}e`} ausgewählt
      </span>
      <div className="h-4 w-px bg-border" />
      <Button
        size="sm"
        variant="default"
        className="gap-1.5 bg-foreground text-background hover:bg-foreground/90"
        onClick={onDelete}
      >
        <Trash2 className="size-3.5" />
        Ausgewählte löschen
      </Button>
      <Button size="sm" variant="ghost" className="gap-1" onClick={onClear}>
        <X className="size-3.5" />
        Auswahl aufheben
      </Button>
    </div>
  )
}