MikrotikManager/components/data-page-toolbar.tsx

"use client"

import { ReactNode } from "react"
import { SearchIcon } from "lucide-react"
import { cn } from "@/lib/utils"
import { Input } from "@/components/ui/input"
import {
  Filters,
  type Filter,
  type FilterFieldConfig,
} from "@/components/reui/filters"
import { SegmentedControl } from "@/components/form-kit"

interface DataPageToolbarProps<T extends string = string> {
  search?: string
  onSearchChange?: (value: string) => void
  searchPlaceholder?: string
  segmented?: {
    value: T
    onChange: (value: T) => void
    options: { value: T; label: string; count?: number }[]
  }
  filters?: Filter[]
  onFiltersChange?: (filters: Filter[]) => void
  filterFields?: FilterFieldConfig[]
  countLabel?: string
  actions?: ReactNode
  className?: string
}

function DataPageToolbar<T extends string = string>({
  search,
  onSearchChange,
  searchPlaceholder = "Поиск…",
  segmented,
  filters,
  onFiltersChange,
  filterFields,
  countLabel,
  actions,
  className,
}: DataPageToolbarProps<T>) {
  return (
    <div className={cn("flex items-center gap-3 px-5 py-3 border-b flex-wrap", className)}>
      {segmented && (
        <SegmentedControl
          value={segmented.value}
          onChange={segmented.onChange}
          options={segmented.options}
        />
      )}
      {filterFields && filters && onFiltersChange && (
        <Filters
          filters={filters}
          fields={filterFields}
          onChange={onFiltersChange}
          size="sm"
        />
      )}
      {onSearchChange != null && (
        <div className="flex items-center gap-2 h-8 px-3 border border-input rounded-md bg-background min-w-[220px]">
          <SearchIcon className="size-3.5 text-muted-foreground shrink-0" />
          <Input
            className="h-6 border-0 bg-transparent px-0 shadow-none focus-visible:ring-0"
            placeholder={searchPlaceholder}
            value={search ?? ""}
            onChange={(e) => onSearchChange(e.target.value)}
          />
        </div>
      )}
      {countLabel && (
        <span className="text-sm text-muted-foreground ml-auto">{countLabel}</span>
      )}
      {actions}
    </div>
  )
}

export { DataPageToolbar, type DataPageToolbarProps }