import { SearchIcon } from 'lucide-react'
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from '@cfdm/ui/components/input-group'

interface TableToolbarProps {
  value: string
  onChange: (value: string) => void
  placeholder?: string
}

export function TableToolbar({
  value,
  onChange,
  placeholder = 'Поиск…',
}: TableToolbarProps) {
  return (
    <InputGroup className="max-w-sm">
      <InputGroupAddon>
        <SearchIcon />
      </InputGroupAddon>
      <InputGroupInput
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder}
        aria-label={placeholder}
      />
    </InputGroup>
  )
}