"use client";

import "./SearchForm.scss";
import Image from "next/image";
import search from "./icons/search.svg";
import { useTranslations } from "next-intl";

interface ISearchFormProps extends React.InputHTMLAttributes<HTMLInputElement> {
  handleSubmit: (e: React.MouseEvent<HTMLFormElement>) => void;
}

const SearchForm: React.FC<ISearchFormProps> = ({
  handleSubmit,
  name,
  placeholder,
  value,
  onChange,
  style,
}: ISearchFormProps) => {
  const t = useTranslations("general");
  return (
    <form style={style} className="search-form" onSubmit={handleSubmit}>
      <div className="search-form__input">
        <Image src={search} alt="Search Icon" />
        <input
          onChange={onChange}
          value={value}
          placeholder={placeholder}
          name={name}
          type="text"
        />
      </div>
      <button type="submit">{t("search")}</button>
    </form>
  );
};

export default SearchForm;
