'use client'

import { formatInteger } from '@/utils/format'

interface ListFilterBarProps {
  query: string
  onQueryChange: (value: string) => void
  placeholder?: string
  resultCount?: number
  totalCount?: number
  className?: string
}

export default function ListFilterBar({
  query,
  onQueryChange,
  placeholder = 'Filter…',
  resultCount,
  totalCount,
  className = '',
}: ListFilterBarProps) {
  const showCounts = typeof resultCount === 'number' && typeof totalCount === 'number'

  return (
    <div className={`flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between ${className}`}>
      <label className="block min-w-0 flex-1">
        <span className="sr-only">{placeholder}</span>
        <input
          type="search"
          value={query}
          onChange={(event) => onQueryChange(event.target.value)}
          placeholder={placeholder}
          className="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder:text-gray-400 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-500"
        />
      </label>
      {showCounts ? (
        <div className="shrink-0 text-sm text-gray-600 dark:text-gray-400">
          {resultCount === totalCount
            ? `${formatInteger(totalCount)} items`
            : `${formatInteger(resultCount)} of ${formatInteger(totalCount)}`}
        </div>
      ) : null}
    </div>
  )
}
