import { openCompatibilityModal } from "../../../features/popup/popupSlice";
import { useDispatch } from "react-redux";

const HomeSearch = () => {
  const dispatch = useDispatch();
  return (
    <section className="pt-8 pb-4 px-4 relative z-40 bg-white">
      <div className="max-w-4xl mx-auto w-full relative">
        <div className="relative group">
          <input
            type="text"
            placeholder="Where are you going?"
            className="w-full bg-white text-slate-900 rounded-full py-4 md:py-6 px-8 md:px-12 text-base md:text-xl shadow-[0_10px_40px_-10px_rgba(0,0,0,0.15)] border border-slate-100 outline-none focus:ring-4 focus:ring-[#EE0434]/10 transition-all placeholder:text-slate-400 pr-16 md:pr-48"
          />
          <button className="absolute right-2 top-2 bottom-2 aspect-square md:aspect-auto md:px-10 bg-gradient-to-r from-[#E21c34] to-[#500B28] rounded-full flex items-center justify-center text-white shadow-lg hover:shadow-[#EE0434]/25 hover:scale-[1.02] active:scale-95 transition-all">
            <svg
              className="w-6 h-6 md:hidden"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
                strokeWidth={3}
                strokeLinecap="round"
                strokeLinejoin="round"
              />
            </svg>
            <span className="hidden md:block font-bold text-lg tracking-wide">
              Search Destination
            </span>
          </button>
        </div>
        <div className="mt-3 flex justify-center gap-2 text-sm text-slate-400 font-medium">
          <a
            className="hover:text-[#EE0434] transition-colors underline color-hover cursor-pointer text-[18px] font-medium"
            onClick={() => {
              dispatch(openCompatibilityModal());
            }}
          >
            Does my phone support eSIM?
          </a>
          {/* ,
          <button className="hover:text-[#EE0434] transition-colors">
            Thailand
          </button>
          ,
          <button className="hover:text-[#EE0434] transition-colors">
            China
          </button> */}
        </div>
      </div>
    </section>
  );
};

export default HomeSearch;
