"use client"

import * as React from "react"
import { Input } from "@/components/ui/input"
import { useDebouncedCallback } from "@/hooks/use-debounced-callback"
import { type Table } from "@tanstack/react-table"

interface DataTableGlobalFilterDetailProps<TData> {
  table: Table<TData>
  placeholder?: string
  className?: string
}

/**
 * 디테일 시트 전용 글로벌 필터 - URL 상태와 연결되지 않는 독립적인 검색
 */
export function DataTableGlobalFilterDetail<TData>({
  table,
  placeholder = "Search...",
  className = "h-8 w-24 sm:w-40"
}: DataTableGlobalFilterDetailProps<TData>) {
  const [value, setValue] = React.useState("")

  // Debounced callback that sets the table's global filter
  const debouncedSetGlobalFilter = useDebouncedCallback((value: string) => {
    table.setGlobalFilter(value)
  }, 300)

  // When user types, update local value immediately,
  // then call the debounced function to update the table filter
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const val = e.target.value
    setValue(val)
    debouncedSetGlobalFilter(val)
  }

  return (
    <Input
      value={value}
      onChange={handleChange}
      placeholder={placeholder}
      className={className}
    />
  )
}