"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 dynamic from "next/dynamic"
import { useDisclosure } from "@/hooks/useDisclosure"
import { useTranslations } from "next-intl"

const AddStaffModal = dynamic(() => import("./AddStaffModal"), { ssr: false })
const AddWorkingHoursModal = dynamic(() => import("./AddWorkingHoursModal"), { ssr: false })

export function StaffHeader({ onAddStaff }: { onAddStaff?: () => void }) {
  const [searchInput, setSearchInput] = useState("")
  const { isOpen, open, close } = useDisclosure()
  const { isOpen: isWorkingHoursOpen, open: openWorkingHours, close: closeWorkingHours } = useDisclosure()
  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("staff.searchPlaceholder")} /> */}
      </div>
      <Button
        onClick={onAddStaff || open}
        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("staff.addStaff")}
      </Button>
      <AddStaffModal open={isOpen} setOpen={close} openWorkingHours={openWorkingHours} />
      <AddWorkingHoursModal open={isWorkingHoursOpen} setOpen={closeWorkingHours} />
    </div>
  )
}