import classNames from "classnames"
import SearchBox from "../Layout/SearchBox"
import { useEffect, useState } from "react"
import { useTranslations } from "next-intl"

type Props = {
  className?: string
  title?: string
  onSearch: (value: string) => void
  value?: string
  disabled?: boolean
}

export default function HeaderCalendarPage({ className, title, onSearch, value, disabled}: Props) {
  const trans = useTranslations("search")
  const [searchValue, setSearchValue] = useState("")

  useEffect(() => {
    setSearchValue(value || "");
  }, [value]);

  return (
    <div className={classNames(className, "flex items-center justify-between p-4 border-b border-[var(--secondary-20)]")}>
      <h2 className="text-[var(--secondary-100)] font-bold text-lg lg:text-xl xl:text-2xl">{title}</h2>
      <SearchBox
        value={searchValue || ""}
        onSearch={onSearch}
        onChange={setSearchValue}
        placeholder={trans("calendar")}
        className="h-12"
        classInput="!h-12 lg:!w-56 xl:!w-56"
        classButton="!h-12 md:!pl-2"
        disabled={disabled}
      />
    </div>
  )
}