import { Search } from 'lucide-react'

import { Input } from '@/components/ui/input'

interface DataTableToolbarProps {
  searchPlaceholder?: string
  searchValue?: string
  onSearchChange?: (value: string) => void
  children?: React.ReactNode
  actions?: React.ReactNode
}

export const DataTableToolbar = ({
  searchPlaceholder = 'Поиск…',
  searchValue = '',
  onSearchChange,
  children,
  actions,
}: DataTableToolbarProps) => (
  <div className="flex flex-col gap-3 border-b bg-muted/20 p-4">
    <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
      <div className="flex flex-1 flex-wrap items-center gap-3">
        {onSearchChange ? (
          <div className="relative w-full min-w-[220px] max-w-sm">
            <Search className="pointer-events-none absolute left-2.5 top-3.5 h-4 w-4 text-muted-foreground" />
            <Input
              value={searchValue}
              onChange={(event) => onSearchChange(event.target.value)}
              placeholder={searchPlaceholder}
              className="pl-8"
            />
          </div>
        ) : null}
        {children}
      </div>
      {actions ? <div className="flex flex-wrap items-center gap-2">{actions}</div> : null}
    </div>
  </div>
)