Momento/memento-note/components/inbox-bulk-bar.tsx

'use client'

import { FolderOpen, Trash2 } from 'lucide-react'
import { MoveToNotebookPicker } from '@/components/move-to-notebook-picker'
import { useLanguage } from '@/lib/i18n'
import { useNotebooks } from '@/context/notebooks-context'
import { cn } from '@/lib/utils'

export function InboxBulkBar({
  totalCount,
  selectedCount,
  busy,
  onSelectAll,
  onDeselectAll,
  onMove,
  onTrash,
}: {
  totalCount: number
  selectedCount: number
  busy?: boolean
  onSelectAll: () => void
  onDeselectAll: () => void
  onMove: (notebookId: string) => void
  onTrash: () => void
}) {
  const { t } = useLanguage()
  const { notebooks } = useNotebooks()
  const allSelected = totalCount > 0 && selectedCount === totalCount
  const hasSelection = selectedCount > 0

  return (
    <div className="flex flex-wrap items-center gap-3 pt-1">
      <button
        type="button"
        onClick={allSelected ? onDeselectAll : onSelectAll}
        disabled={totalCount === 0 || busy}
        className="text-[13px] font-medium text-foreground hover:opacity-70 transition-opacity disabled:opacity-40"
      >
        {allSelected ? t('notes.deselectAll') : t('notes.selectAll')}
      </button>
      <span className="text-[12px] text-muted-foreground">
        {selectedCount === 1
          ? t('notes.selectedCountOne')
          : t('notes.selectedCount', { count: selectedCount })}
      </span>
      <div className="flex items-center gap-2 ms-auto">
        {hasSelection ? (
          <MoveToNotebookPicker
            notebooks={notebooks}
            currentNotebookId={null}
            showGeneralNotes={false}
            onSelect={(notebookId) => {
              if (notebookId) onMove(notebookId)
            }}
          >
            <button
              type="button"
              disabled={busy}
              className="flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[12px] font-medium border border-foreground/15 text-foreground hover:bg-foreground/5 transition-colors"
            >
              <FolderOpen size={14} />
              {t('notes.bulkMove')}
            </button>
          </MoveToNotebookPicker>
        ) : (
          <button
            type="button"
            disabled
            className="flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[12px] font-medium border border-transparent text-muted-foreground/50 cursor-not-allowed"
          >
            <FolderOpen size={14} />
            {t('notes.bulkMove')}
          </button>
        )}
        <button
          type="button"
          disabled={!hasSelection || busy}
          onClick={onTrash}
          className={cn(
            'flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[12px] font-medium border transition-colors',
            hasSelection
              ? 'border-rose-500/30 text-rose-600 dark:text-rose-400 hover:bg-rose-50 dark:hover:bg-rose-500/10'
              : 'border-transparent text-muted-foreground/50 cursor-not-allowed',
          )}
        >
          <Trash2 size={14} />
          {t('notes.bulkTrash')}
        </button>
      </div>
    </div>
  )
}