"use client"

import * as React from "react"
import type { Table } from "@tanstack/react-table"

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

export function DataTableToolbar<TData>({
  table,
  searchColumnId,
  searchPlaceholder = "Search…",
  right,
}: {
  table: Table<TData>
  searchColumnId: string
  searchPlaceholder?: string
  right?: React.ReactNode
}) {
  const column = table.getColumn(searchColumnId)

  return (
    <div className="flex flex-col gap-2 px-4 lg:px-6 sm:flex-row sm:items-center sm:justify-between">
      <div className="flex flex-1 items-center gap-2">
        {column ? (
          <Input
            value={(column.getFilterValue() as string) ?? ""}
            onChange={(e) => column.setFilterValue(e.target.value)}
            placeholder={searchPlaceholder}
            className="h-9 w-full sm:max-w-xs"
          />
        ) : null}
      </div>
      {right ? <div className="shrink-0">{right}</div> : null}
    </div>
  )
}