/* eslint-disable @typescript-eslint/no-explicit-any */
import React from "react"

import t from "@/constants/wording"

import * as styles from "./input.module.scss"

type changeHandler_String = (q: string) => void
// type changeHandler_Event = (k: React.ChangeEvent<HTMLInputElement>) => void

// function isChangeVal(
//   fn: changeHandler_String | changeHandler_Event
// ): fn is changeHandler_String {
//   if (fn.name === "changeVal") return true
//   return false
// }

export const Input = ({
  onChange,
  keyHandle = () => undefined,
  value,
  placeholder = t("type keywords to search"),
  className = "",
}: {
  onChange?: changeHandler_String
  keyHandle?: (...rest: any[]) => void
  value?: string
  placeholder?: string
  className?: string
}) => {
  return (
    <input
      type="search"
      placeholder={placeholder}
      aria-label={t("type keywords to search")}
      onChange={e => {
        onChange && onChange(e.target.value)
      }}
      onKeyDown={keyHandle}
      value={value}
      className={className === "" ? styles.input : className}
      autoComplete="off"
      autoCorrect="off"
      autoCapitalize="none"
      spellCheck="false"
    />
  )
}