"use client";

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
      className="mb-8 h-12 w-full relative flex items-center"
      onSubmit={handleSubmit}
    >
      <div className="h-full flex flex-1 items-center border border-black rounded-sm bg-white">
        <Image
          className="w-12 h-12 p-2"
          src={search}
          alt="Search button icon"
        />
        <input
          onChange={onChange}
          value={value}
          placeholder={placeholder}
          name={name}
          type="text"
          className="px-3 pl-2 w-full h-full text-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
          aria-label={t("search")}
        />
      </div>
      <button
        className="h-full w-24 rounded-sm bg-blue text-white"
        type="submit"
      >
        {t("search")}
      </button>
    </form>
  );
};

export default SearchForm;