"use client"

import classNames from "classnames"
import Image from "next/image"
import SearchBox from "../Layout/SearchBox"
import { useState } from "react"
import { useTranslations } from "next-intl"
import { useSearchParams } from "next/navigation"

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

export default function HeaderNewsPage({ className, title, filter = true, onSearch, keyTransPlaceholder, placeholder}: Props) {
  const trans = useTranslations("news")
  const searchParams = useSearchParams()
  const tranSearch = useTranslations(keyTransPlaceholder || "search")
  const [searchValue, setSearchValue] = useState(searchParams.get("search") || "")
  return (
    <div className={classNames(className, "flex items-center justify-between p-4 border-b border-[var(--secondary-20)]")}>
      <div>
        <h2 className="text-[var(--secondary-100)] font-bold text-lg lg:text-xl xl:text-2xl">{title}</h2>
        {/* <p className="text-[var(--secondary-60)] xl:text-base">{trans("found_number_news", {num: 0})}</p> */}
      </div>
      <div className="flex items-center justify-end">
        <SearchBox
          value={searchValue}
          onSearch={onSearch}
          onChange={setSearchValue}
          placeholder={tranSearch(placeholder || "news")}
          className="h-12"
          classInput="!h-12 lg:!w-56 xl:!w-56"
          classButton="!h-12 md:!pl-2"
        />
        {filter && (
          <>
            <span className="bg-[var(--secondary-20)] w-[1px] h-10 mx-4"></span>
            <button
              type="button"
              className="w-12 h-12 border border-[var(--secondary-20)] rounded-lg hover:text-[var(--primary--70)] hover:border-[var(--primary--70)] flex items-center justify-center">
              <Image
                alt="filter"
                src="/img/icon/filter.svg"
                width={24}
                height={14}
              />
            </button>
          </>
        )}
      </div>
    </div>
  )
}