import React from "react";
import _ from "lodash";

const langDetector = (lang = "fa", option1, option2) => {
  return lang === "fa" ? option1 : option2;
};

export default function Search({
  lang,
  backgroundColor,
  borderColor,
  textColor,
  icon,
}) {
  return (
    <div
      className={`flex items-center justify-center border-solid w-full border rounded-md overflow-hidden ${backgroundColor} border-gray-300`}
    >
      <div className="relative text-gray-600 w-full bg-transparent">
        <span
          className={_.join(
            [
              "absolute inset-y-0 flex items-center pl-2",
              langDetector(lang, "left-0", "right-0"),
            ],
            " "
          )}
        >
          <button
            type="submit"
            className="p-1 focus:outline-none focus:shadow-outline"
          >
            {icon && <img src={icon} className="w-6 h-6" alt="" />}
          </button>
        </span>
        <input
          type="search"
          name="q"
          className={`w-full py-2 text-sm rounded-md pr-3 outline-none bg-transparent ${textColor}`}
          placeholder={_.join(
            [langDetector(lang, "جستجو...", "Search...")],
            " "
          )}
          autoComplete="off"
        />
      </div>
    </div>
  );
}