"use client";
import { FaPlus } from "react-icons/fa";
import { useTranslations } from "next-intl";
import { useDispatch } from "react-redux";
import { AppDispatch } from "@/store/store";

import { CancelAddOrUpdateAddresses } from "@/store/address.slice";
const EmptyAddresses = ({ setIsOpen, setAuthStage }: any) => {
  const t = useTranslations("");
  const dispatch = useDispatch<AppDispatch>();

  return (
    <div className="flex items-center justify-center h-[600px] ">
      <div>
        <div className="flex justify-center mb-4">
          {/* <MediaWithFallback
            src={Location}
            width={1790}
            height={900}
            className="w-[200px] h-[200px] object-contain  "
            alt="hero"
          /> */}
        </div>

        <h2 className="lg:text-2xl text-xl font-bold   leading-8 mb-2 text-center">
          {t("Text.noAddresses")}
        </h2>

        <p className=" mx-auto  text-[#6A6A6A] text-center text-lg font-medium leading-6 mb-6">
          {t("Text.addAddresses")}
        </p>

        <button
          onClick={() => {
            setIsOpen(true);
            setAuthStage("location");
            dispatch(CancelAddOrUpdateAddresses());
          }}
          className="text-center cursor-pointer  flex mx-auto items-center gap-2 px-7 py-3 bg-primary text-white font-medium rounded-full "
        >
          <FaPlus size={20} />
          {t("BUTTONS.addNewAddress")}
        </button>
      </div>
    </div>
  );
};

export default EmptyAddresses;