"use client"
import { SearchBar } from "@/components/common/SearchBar"
import { useState, ChangeEvent } from "react"
import { useTranslations } from "next-intl"

export function CustomersHeader() {
  const [searchInput, setSearchInput] = useState("")
  const t = useTranslations()

  const handleSearchChange = (e: ChangeEvent<HTMLInputElement>) => {
    setSearchInput(e.target.value)
  }

  return (
    <div className="flex items-center justify-between gap-4 w-full">
      <div className="flex-1 max-w-md">
        <SearchBar value={searchInput} onChange={handleSearchChange} placeholder={t("customers.search.placeholder")} />
      </div>
    </div>
  )
}