"use client";
import AppContext from "@ctx/AppContext";
import Link from "next/link";
import PersianNumber from "plugins/PersianNumber";
import { useContext } from "react";

const SideBarProfile = () => {
  const CTX = useContext(AppContext);
  const profile = CTX.state.profile;

  return (
    <div className="rounded-xl border border-gray-100 bg-gray-200 overflow-hidden xs:hidden lg:block h-fit sticky top-20">
      <div>
        <div className="bg-white rounded-b-3xl p-5 flex shadow">
          <div className="bg-primary-500 w-[60px] h-[60px] rounded-full"></div>

          <div className="m-3">
            <p className="mb-0 text-sm">
              {profile?.firstName} {profile?.lastName}
            </p>

            <p className="mb-0 text-sm">
              <PersianNumber number={profile?.phoneNumber} />
            </p>
          </div>
        </div>

        <ul className="p-2 ">
          <li className="group cursor-pointer">
            <Link href={"/profile"}>
              <div className="flex justify-between  p-4  rounded-full group-hover:bg-primary-200 tr03">
                <p className="mb-0 text-sm text-gray-500 group-hover:text-black tr03">
                  داشبورد
                </p>
                <div className="w-[20px] h-[20px] rounded-full bg-primary-200 group-hover:bg-primary-500 tr03 "></div>
              </div>
            </Link>
          </li>

          <li className="group cursor-pointer">
            <Link href={"/profile/orders"}>
              <div className="flex justify-between  p-4  rounded-full group-hover:bg-primary-200 tr03">
                <p className="mb-0 text-sm text-gray-500 group-hover:text-black tr03">
                  پیگیری سغارشات
                </p>
                <div className="w-[20px] h-[20px] rounded-full bg-primary-200 group-hover:bg-primary-500 tr03 "></div>
              </div>
            </Link>
          </li>

          <li className="group cursor-pointer">
            <Link href={"/profile/address"}>
              <div className="flex justify-between  p-4  rounded-full group-hover:bg-primary-200 tr03">
                <p className="mb-0 text-sm text-gray-500 group-hover:text-black tr03">
                  آدرس ها{" "}
                </p>
                <div className="w-[20px] h-[20px] rounded-full bg-primary-200 group-hover:bg-primary-500 tr03 "></div>
              </div>
            </Link>
          </li>

          <li className="group cursor-pointer">
            <Link href={"/profile/saleCooperationSystem"}>
              <div className="flex justify-between  p-4  rounded-full group-hover:bg-primary-200 tr03">
                <p className="mb-0 text-sm text-gray-500 group-hover:text-black tr03">
                  همکاری در فروش{" "}
                </p>
                <div className="w-[20px] h-[20px] rounded-full bg-primary-200 group-hover:bg-primary-500 tr03 "></div>
              </div>
            </Link>
          </li>

          <li
            className="flex justify-between p-4 rounded-full  group hover:bg-red-200 tr03 cursor-pointer"
            onClick={() => CTX.setBottomSheetLogOutOpen(true)}
          >
            <p className="mb-0 text-sm text-red-500 group-hover: ">خروج </p>
            <div className="w-[20px] h-[20px] rounded-full bg-red-200 group-hover:bg-red-500 tr03 "></div>
          </li>
        </ul>
      </div>
    </div>
  );
};

export default SideBarProfile;
