"use client";
import Image from "next/image";
import React, { useContext } from "react";
import logo from "../../../public/images/logo.png";
import Link from "next/link";
import AppContext from "@ctx/AppContext";

const SideBarNavBarMobile = () => {
  const CTX = useContext(AppContext);

  const closeNavbar = CTX.state.closeNavbar;
  console.log("closeNavbar", closeNavbar);
  return (
    <>
      <div className="sm:block  lg:hidden  ">
        <div
          className={`fixed w-[250px] top-0 right-0 z-50 tr03 ${
            closeNavbar ? "" : "translate-x-full"
          } `}
        >
          <div
            className={`absolute  mt-2  tr03 z-5  ${
              closeNavbar ? "ml-[-34px] " : ""
            }`}
          >
            <div
              className="w-[30px] h-[30px] bg-white shadow rounded-full text-center  "
              onClick={
                () => CTX.setCloseNavbar(false)
                // setOpenResIgType(false) &
                // setResponsiveNavBarItemStep(0)
              }
            ></div>
          </div>
          <div className=" bg-white h-[100vh] relative overflow-hidden tr03 shadow pt-2  ">
            <div className="text-center">
              <div className=" bg-dark rounded-full mx-auto ">
                <div className="text-center">
                  <Link href="/">
                    <div className="text-center mt-5  ">
                      <Image
                        src={logo}
                        width={50}
                        height={50}
                        alt=""
                        className="mx-auto"
                      />
                    </div>
                  </Link>

                  <Link href="/counseling">
                    <div className="xs:w-full  md:w-fit text-center mt-4">
                      <button className=" btn-secondary text-sm px-7 mx-2 mt-2 ">
                        مشاوره رایگان
                      </button>
                    </div>
                  </Link>

                  <Link href="/estimate">
                    <div className="xs:w-full  md:w-fit text-center">
                      <button className=" btn-outline-primary text-sm px-7 mx-2 mt-2 ">
                        قیمت تخمین{" "}
                      </button>
                    </div>
                  </Link>

                  <div className="w-[100px] h-[1px] bg-gray-300  mx-auto mt-4 opacity-50"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default SideBarNavBarMobile;