"use client"
import { SearchBar } from "@/components/common/SearchBar"
import { useState, ChangeEvent } from "react"
import { Button } from "@/components/ui/button"
import { Plus } from "lucide-react"
import { useRouter } from "next/navigation"
import { useTranslations } from "next-intl"
import { AddCategoryModal } from "./AddCategoryModal"

export function ServicesHeader() {
  const [searchInput, setSearchInput] = useState("")
  const [isCategoryModalOpen, setIsCategoryModalOpen] = useState(false)
  const navigate = useRouter()
  const t = useTranslations()

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

  const handleAddService = () => {
    navigate.push("/dashboard/services/new")
  }

  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="Search staff by name or role..." /> */}
        </div>
        <div className="flex gap-3">
          <Button
            onClick={() => setIsCategoryModalOpen(true)}
            className="flex items-center gap-2 px-4 py-3 bg-primary-gradient text-white font-semibold shadow-none"
          >
            <Plus className="w-5 h-5 text-white" />
            {t("services.addCategory")}
          </Button>
          <Button
            onClick={handleAddService}
            className="flex items-center gap-2 px-4 py-3 bg-primary-gradient text-white font-semibold shadow-none"
          >
            <Plus className="w-5 h-5 text-white" />
            {t("services.addService")}
          </Button>
        </div>
      </div>

      <AddCategoryModal
        open={isCategoryModalOpen}
        onOpenChange={setIsCategoryModalOpen}
      />
    </>
  )
}