"use client";
import NavBarDownCart from "@comp/Carts/component/NavBarDownCart/page";
import Navbar from "@comp/Navbar/page";
import PersianNumber from "plugins/PersianNumber";
import React, { useContext, useEffect } from "react";

import zarin from "@img/zarin.png";
import ap from "@img/ap.png";
import Image from "next/image";
import AppContext from "@ctx/AppContext";
import BottomSheetDiscount from "plugins/bottomSheet/BottomSheetDiscount";
import { useRouter } from "next/navigation";

const page = () => {
  const CTX = useContext(AppContext);
  const router = useRouter();
  const checkOutData = CTX.state.checkOutData;

  console.log(checkOutData);

  useEffect(() => {
    if (CTX.state.checkOutData.length <= 0) {
      router.push("/cart");
    }
  }, []);

  return (
    <>
      <div className=" pb-20">
        <Navbar theme={1} />

        <div className="text-right flex rtl justify-between border-y-[1px] border-gray-100 mt-3 px-4 ">
          <p className="mb-0 !text-sm font-semibold py-4">آدس ها</p>

          <div className="bg-primary-200 w-fit h-fit relative my-3 p-1 rounded-lg">
            <p className="mb-0 text-[11px] text-white rtl">تغییر آدرس</p>
          </div>
        </div>

        <div className="flex rtl px-3 mt-3">
          <div>
            <svg
              width="25"
              height="25"
              viewBox="0 0 234 244"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              className="mx-auto opacity-70 mt-2"
            >
              <path
                d="M65.8246 162.813C66.1529 163.999 66.7117 165.11 67.4692 166.081C68.2267 167.052 69.168 167.864 70.2394 168.471C71.3107 169.078 72.4911 169.468 73.7133 169.619C74.9354 169.77 76.1752 169.678 77.3621 169.35C78.5489 169.022 79.6594 168.463 80.6303 167.705C81.6011 166.948 82.4133 166.007 83.0203 164.935C83.6274 163.864 84.0175 162.683 84.1683 161.461C84.3192 160.239 84.2279 158.999 83.8996 157.813L65.8246 162.813ZM11.9996 31.0625C10.8081 30.7145 9.55935 30.6066 8.32582 30.745C7.09228 30.8834 5.89851 31.2654 4.81377 31.8688C3.72903 32.4722 2.77491 33.285 2.00678 34.26C1.23864 35.2351 0.671788 36.353 0.3391 37.5488C0.00641134 38.7447 -0.0854865 39.9947 0.0687392 41.2264C0.222965 42.458 0.620244 43.6468 1.23752 44.7237C1.8548 45.8006 2.6798 46.7442 3.66463 47.4997C4.64947 48.2553 5.77454 48.8077 6.97458 49.125L11.9996 31.0625ZM224.35 168.563C225.57 168.28 226.722 167.756 227.737 167.021C228.752 166.286 229.609 165.355 230.257 164.284C230.906 163.212 231.334 162.021 231.515 160.781C231.695 159.541 231.626 158.278 231.31 157.065C230.994 155.853 230.438 154.716 229.676 153.722C228.913 152.728 227.959 151.897 226.869 151.278C225.78 150.659 224.578 150.264 223.333 150.118C222.089 149.971 220.828 150.076 219.625 150.425L224.35 168.563ZM99.4621 191.488C103.337 205.488 94.8371 220.275 79.7871 224.188L84.4996 242.325C109.212 235.913 124.312 211.05 117.537 186.488L99.4621 191.488ZM79.7871 224.188C64.6371 228.125 49.4371 219.325 45.5371 205.2L27.4621 210.2C34.2121 234.638 59.8871 248.725 84.4996 242.325L79.7871 224.188ZM45.5371 205.2C41.6621 191.2 50.1621 176.413 65.2121 172.5L60.4996 154.375C35.7871 160.788 20.6746 185.638 27.4621 210.2L45.5371 205.2ZM65.2121 172.5C80.3621 168.563 95.5621 177.363 99.4621 191.488L117.537 186.488C110.787 162.05 85.1121 147.963 60.4996 154.363L65.2121 172.5ZM83.8996 157.813L56.9996 60.4375L38.9246 65.4375L65.8246 162.813L83.8996 157.813ZM33.2996 36.9625L11.9996 31.0625L6.97458 49.125L28.2871 55.0375L33.2996 36.9625ZM56.9996 60.4375C55.4136 54.8107 52.3969 49.6907 48.2434 45.5766C44.0899 41.4625 38.9413 38.4948 33.2996 36.9625L28.3121 55.0375C33.6246 56.5125 37.5746 60.55 38.9246 65.4375L56.9996 60.4375ZM110.875 198.063L224.35 168.563L219.637 150.425L106.15 179.925L110.875 198.063Z"
                fill="black"
              />
              <path
                d="M211.562 49.9502C205.5 28.0002 202.462 17.0252 193.562 12.0377C184.637 7.03772 173.325 9.98772 150.7 15.8752L126.7 22.1002C104.075 27.9752 92.7623 30.9252 87.6248 39.5752C82.4748 48.2127 85.4998 59.1877 91.5623 81.1252L97.9998 104.413C104.062 126.35 107.087 137.325 116 142.313C124.912 147.313 136.225 144.363 158.85 138.488L182.85 132.238C205.475 126.363 216.787 123.425 221.937 114.788C224.762 110.038 225.125 104.588 223.862 97.0002"
                stroke="black"
                stroke-opacity="0.44"
                stroke-width="18.75"
                stroke-linecap="round"
              />
            </svg>
          </div>
          <div className="mx-2">
            <p className="mb-0 text-sm text-right font-medium text-primary-500 ">
              آدرس شما{" "}
            </p>
            <p className="mb-0 text-[12px] text-gray-500">
              {" "}
              تهران ، نارمک ، فلکه پنجم پلاک 5 ، واحد 22
            </p>
          </div>
        </div>

        <div className="text-right flex rtl justify-between border-y-[1px] border-gray-100 mt-3 px-4 ">
          <p className="mb-0 text-sm font-semibold py-4">زمان و نحوه ارسال</p>

          <div className="border border-gray-300 w-fit h-fit relative my-3 p-1 rounded-lg">
            <div className="flex">
              <div>
                <svg
                  width="15"
                  height="15"
                  viewBox="0 0 251 200"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                  className="opacity-60"
                >
                  <path
                    d="M105.625 143.75C110.625 148.75 117.083 151.2 125 151.1C132.917 151 138.75 148.133 142.5 142.5L212.5 37.5L107.5 107.5C101.875 111.25 98.9083 116.979 98.6 124.688C98.2917 132.396 100.633 138.75 105.625 143.75ZM125 0C137.292 0 149.117 1.71667 160.475 5.15C171.833 8.58334 182.508 13.7417 192.5 20.625L168.75 35.625C161.875 32.0833 154.742 29.4292 147.35 27.6625C139.958 25.8958 132.508 25.0083 125 25C97.2917 25 73.6958 34.7417 54.2125 54.225C34.7292 73.7083 24.9917 97.3 25 125C25 133.75 26.2 142.396 28.6 150.938C31 159.479 34.3833 167.5 38.75 175H211.25C216.042 167.083 219.533 158.854 221.725 150.312C223.917 141.771 225.008 132.917 225 123.75C225 116.25 224.113 108.958 222.338 101.875C220.563 94.7917 217.908 87.9167 214.375 81.25L229.375 57.5C235.625 67.2917 240.575 77.7083 244.225 88.75C247.875 99.7917 249.8 111.25 250 123.125C250.208 135 248.854 146.354 245.938 157.188C243.021 168.021 238.75 178.333 233.125 188.125C230.833 191.875 227.708 194.792 223.75 196.875C219.792 198.958 215.625 200 211.25 200H38.75C34.375 200 30.2083 198.958 26.25 196.875C22.2917 194.792 19.1667 191.875 16.875 188.125C11.4583 178.75 7.29167 168.804 4.375 158.288C1.45833 147.771 0 136.675 0 125C0 107.708 3.28334 91.5125 9.85 76.4125C16.4167 61.3125 25.375 48.0833 36.725 36.725C48.075 25.3667 61.35 16.4083 76.55 9.85C91.75 3.29167 107.9 0.00833333 125 0Z"
                    fill="black"
                    fill-opacity="0.61"
                  />
                </svg>
              </div>
              <p className="mb-0 text-[11px] rtl mr-2 text-gray-600">
                سریع ترین زمان ارسال
              </p>
            </div>
          </div>
        </div>

        <div>
          <div className="flex rtl px-3 mt-5">
            <div>
              <svg
                width="25"
                height="25"
                viewBox="0 0 226 176"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                className="opacity-70 mt-2"
              >
                <path
                  d="M138 163C158.833 163 176.542 155.708 191.125 141.125C205.708 126.542 213 108.833 213 88C213 66.9583 205.342 49.2 190.025 34.725C174.708 20.25 156.325 13.0083 134.875 13C122.792 13 111.458 14.4667 100.875 17.4C90.3083 20.3333 80.1667 24.7333 70.45 30.6L107.475 45.025C114.725 48.0833 120.583 52.8292 125.05 59.2625C129.517 65.6958 131.75 72.775 131.75 80.5C131.75 91.4 128.029 100.583 120.588 108.05C113.138 115.517 104.15 119.25 93.625 119.25H15.55C14.65 123.608 14 128.525 13.6 134C13.2 139.475 13 146.579 13 155.313C13 157.229 13.8 158.992 15.4 160.6C17.0083 162.2 18.7708 163 20.6875 163H138ZM17.525 106.75H93C100.392 106.75 106.612 104.221 111.662 99.1625C116.721 94.1125 119.25 87.8917 119.25 80.5C119.25 75.2583 117.792 70.5042 114.875 66.2375C111.975 61.9625 107.983 58.7542 102.9 56.6125L58.575 38.8C48.5417 47.325 40.0583 57.3208 33.125 68.7875C26.1667 80.2625 20.9667 92.9167 17.525 106.75ZM138 175.5H20.6875C14.9375 175.5 10.1375 173.575 6.2875 169.725C2.42917 165.867 0.5 161.063 0.5 155.313V145.938C0.5 124.554 3.79167 104.958 10.375 87.15C16.9583 69.3333 26.1875 54.0125 38.0625 41.1875C49.9292 28.3542 64.0958 18.3667 80.5625 11.225C97.0542 4.075 115.158 0.5 134.875 0.5C147.275 0.5 158.967 2.78333 169.95 7.35C180.925 11.9167 190.538 18.1292 198.788 25.9875C207.038 33.8542 213.554 43.1042 218.338 53.7375C223.113 64.3958 225.5 75.8167 225.5 88C225.5 99.9833 223.217 111.308 218.65 121.975C214.083 132.642 207.829 141.946 199.888 149.888C191.946 157.829 182.683 164.079 172.1 168.638C161.517 173.213 150.15 175.5 138 175.5Z"
                  fill="black"
                />
              </svg>
            </div>
            <div className="mx-2">
              <h3 className="mb-0 text-sm text-right font-medium text-primary-500 ">
                ارسال با پیک (فقط محدوده تهران){" "}
              </h3>
              <p className="mb-0 text-[12px] text-gray-500">
                {" "}
                <PersianNumber number={5} style={"text-gray-500  mx-1"} />
                ساعت
                <small className="mx-2">|</small>
                هزینه ارسال
                <PersianNumber number={150} style={"text-gray-500  mx-1"} />
                هزار تومان
              </p>
            </div>
          </div>

          <div className="flex rtl px-3 mt-5">
            <div>
              <svg
                width="25"
                height="25"
                viewBox="0 0 220 220"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                className="mt-1 opacity-70"
              >
                <path
                  d="M72.5 10V47.5C72.5 54.1304 69.8661 60.4893 65.1777 65.1777C60.4893 69.8661 54.1304 72.5 47.5 72.5H10M147.5 210V172.5C147.5 165.87 150.134 159.511 154.822 154.822C159.511 150.134 165.87 147.5 172.5 147.5H210M210 72.5H172.5C165.87 72.5 159.511 69.8661 154.822 65.1777C150.134 60.4893 147.5 54.1304 147.5 47.5V10M10 147.5H47.5C54.1304 147.5 60.4893 150.134 65.1777 154.822C69.8661 159.511 72.5 165.87 72.5 172.5V210"
                  stroke="black"
                  stroke-opacity="0.79"
                  stroke-width="18.75"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>
            </div>
            <div className="mx-2">
              <h3 className="mb-0 text-sm text-right font-medium text-primary-500 ">
                پست عادی{" "}
              </h3>
              <p className="mb-0 text-[12px] text-gray-500">
                {" "}
                حداکثر
                <PersianNumber number={5} style={"text-gray-600  mx-1"} />
                روز کاری
                <small className="mx-2">|</small>
                هزینه ارسال
                <PersianNumber number={30} style={"text-gray-600  mx-1"} />
                هزار تومان
              </p>
            </div>
          </div>

          <div className="flex rtl px-3 mt-5">
            <div>
              <svg
                width="25"
                height="25"
                viewBox="0 0 234 244"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                className="mx-auto opacity-70 mt-2"
              >
                <path
                  d="M65.8246 162.813C66.1529 163.999 66.7117 165.11 67.4692 166.081C68.2267 167.052 69.168 167.864 70.2394 168.471C71.3107 169.078 72.4911 169.468 73.7133 169.619C74.9354 169.77 76.1752 169.678 77.3621 169.35C78.5489 169.022 79.6594 168.463 80.6303 167.705C81.6011 166.948 82.4133 166.007 83.0203 164.935C83.6274 163.864 84.0175 162.683 84.1683 161.461C84.3192 160.239 84.2279 158.999 83.8996 157.813L65.8246 162.813ZM11.9996 31.0625C10.8081 30.7145 9.55935 30.6066 8.32582 30.745C7.09228 30.8834 5.89851 31.2654 4.81377 31.8688C3.72903 32.4722 2.77491 33.285 2.00678 34.26C1.23864 35.2351 0.671788 36.353 0.3391 37.5488C0.00641134 38.7447 -0.0854865 39.9947 0.0687392 41.2264C0.222965 42.458 0.620244 43.6468 1.23752 44.7237C1.8548 45.8006 2.6798 46.7442 3.66463 47.4997C4.64947 48.2553 5.77454 48.8077 6.97458 49.125L11.9996 31.0625ZM224.35 168.563C225.57 168.28 226.722 167.756 227.737 167.021C228.752 166.286 229.609 165.355 230.257 164.284C230.906 163.212 231.334 162.021 231.515 160.781C231.695 159.541 231.626 158.278 231.31 157.065C230.994 155.853 230.438 154.716 229.676 153.722C228.913 152.728 227.959 151.897 226.869 151.278C225.78 150.659 224.578 150.264 223.333 150.118C222.089 149.971 220.828 150.076 219.625 150.425L224.35 168.563ZM99.4621 191.488C103.337 205.488 94.8371 220.275 79.7871 224.188L84.4996 242.325C109.212 235.913 124.312 211.05 117.537 186.488L99.4621 191.488ZM79.7871 224.188C64.6371 228.125 49.4371 219.325 45.5371 205.2L27.4621 210.2C34.2121 234.638 59.8871 248.725 84.4996 242.325L79.7871 224.188ZM45.5371 205.2C41.6621 191.2 50.1621 176.413 65.2121 172.5L60.4996 154.375C35.7871 160.788 20.6746 185.638 27.4621 210.2L45.5371 205.2ZM65.2121 172.5C80.3621 168.563 95.5621 177.363 99.4621 191.488L117.537 186.488C110.787 162.05 85.1121 147.963 60.4996 154.363L65.2121 172.5ZM83.8996 157.813L56.9996 60.4375L38.9246 65.4375L65.8246 162.813L83.8996 157.813ZM33.2996 36.9625L11.9996 31.0625L6.97458 49.125L28.2871 55.0375L33.2996 36.9625ZM56.9996 60.4375C55.4136 54.8107 52.3969 49.6907 48.2434 45.5766C44.0899 41.4625 38.9413 38.4948 33.2996 36.9625L28.3121 55.0375C33.6246 56.5125 37.5746 60.55 38.9246 65.4375L56.9996 60.4375ZM110.875 198.063L224.35 168.563L219.637 150.425L106.15 179.925L110.875 198.063Z"
                  fill="black"
                />
                <path
                  d="M211.562 49.9502C205.5 28.0002 202.462 17.0252 193.562 12.0377C184.637 7.03772 173.325 9.98772 150.7 15.8752L126.7 22.1002C104.075 27.9752 92.7623 30.9252 87.6248 39.5752C82.4748 48.2127 85.4998 59.1877 91.5623 81.1252L97.9998 104.413C104.062 126.35 107.087 137.325 116 142.313C124.912 147.313 136.225 144.363 158.85 138.488L182.85 132.238C205.475 126.363 216.787 123.425 221.937 114.788C224.762 110.038 225.125 104.588 223.862 97.0002"
                  stroke="black"
                  stroke-opacity="0.44"
                  stroke-width="18.75"
                  stroke-linecap="round"
                />
              </svg>
            </div>
            <div className="mx-2">
              <h3 className="mb-0 text-sm text-right font-medium text-primary-500 ">
                پست سفارشی{" "}
              </h3>
              <p className="mb-0 text-[12px] text-gray-500">
                {" "}
                هزینه ارسال
                <PersianNumber number={35} style={"text-gray-600  mx-1"} />
                هزار تومان
              </p>
            </div>
          </div>

          <div className="flex rtl px-3 mt-5">
            <div>
              <svg
                width="25"
                height="25"
                viewBox="0 0 264 264"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                className="opacity-70 mt-2"
              >
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M141.375 117.938L197.625 141.375V122.625L141.375 94.5V66.375C141.375 63.8886 140.387 61.504 138.629 59.7459C136.871 57.9877 134.486 57 132 57C129.514 57 127.129 57.9877 125.371 59.7459C123.613 61.504 122.625 63.8886 122.625 66.375V94.5L66.375 122.625V141.375L122.625 117.938V169.5L94.5 188.25V197.625L132 188.25L169.5 197.625V188.25L141.375 169.5V117.938Z"
                  fill="black"
                  fill-opacity="0.44"
                />
                <path
                  d="M132 263.25C106.041 263.25 80.6654 255.552 59.0815 241.13C37.4975 226.709 20.6749 206.21 10.7409 182.227C0.806868 158.244 -1.79232 131.854 3.27199 106.394C8.3363 80.9345 20.8366 57.5479 39.1923 39.1923C57.5479 20.8366 80.9345 8.3363 106.394 3.27199C131.854 -1.79232 158.244 0.806868 182.227 10.7409C206.21 20.6749 226.709 37.4975 241.13 59.0815C255.552 80.6654 263.25 106.041 263.25 132C263.21 166.798 249.37 200.158 224.764 224.764C200.158 249.37 166.798 263.21 132 263.25ZM132 19.5001C109.75 19.5001 87.9989 26.0981 69.4984 38.4597C50.9979 50.8214 36.5785 68.3915 28.0636 88.9482C19.5488 109.505 17.3209 132.125 21.6617 153.948C26.0026 175.771 36.7171 195.816 52.4505 211.55C68.184 227.283 88.2295 237.998 110.052 242.338C131.875 246.679 154.495 244.451 175.052 235.936C195.609 227.422 213.179 213.002 225.54 194.502C237.902 176.001 244.5 154.25 244.5 132C244.465 102.174 232.602 73.5792 211.511 52.4889C190.421 31.3986 161.826 19.5348 132 19.5001Z"
                  fill="black"
                />
              </svg>
            </div>
            <div className="mx-2">
              <h3 className="mb-0 text-sm text-right font-medium text-primary-500 ">
                پست پیشتاز{" "}
              </h3>
              <p className="mb-0 text-[12px] text-gray-500">
                {" "}
                حداکثر
                <PersianNumber number={2} style={"text-gray-600  mx-1"} />
                روز کاری
                <small className="mx-2">|</small> هزینه ارسال
                <PersianNumber number={150} style={"text-gray-600  mx-1"} />
                هزار تومان
              </p>
            </div>
          </div>
        </div>

        <div className="text-right flex rtl justify-between border-y-[1px] border-gray-100 mt-3 px-4 ">
          <p className="mb-0 text-sm font-semibold py-4">روش پرداخت</p>
        </div>

        <div>
          <div className="flex rtl px-3 mt-5">
            <div>
              <Image src={zarin} className="w-[50px]" />
            </div>
            <div className="mx-2">
              <h3 className="mb-0 text-sm text-right font-medium text-primary-500 ">
                پرداخت آنلاین
              </h3>
              <p className="mb-0 text-[12px] text-gray-500">زرین پال</p>
            </div>
          </div>

          <div className="flex rtl px-3 mt-5">
            <div>
              <Image src={ap} className="w-[45px]" />
            </div>
            <div className="mx-2">
              <h3 className="mb-0 text-sm text-right font-medium text-primary-500 ">
                پرداخت آنلاین
              </h3>
              <p className="mb-0 text-[12px] text-gray-500">آسان پرداخت</p>
            </div>
          </div>
          <div
            className="flex justify-between rtl px-3 mt-5"
            onClick={() => CTX.setBottomSheetDiscountOpen(true)}
          >
            <div className="flex">
              <div>
                <svg
                  width="25"
                  height="25"
                  viewBox="0 0 244 194"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                  className="opacity-70 mt-2"
                >
                  <path
                    d="M122 93.875V100.125M122 47V53.25M122 140.75V147M209.5 184.5C216.13 184.5 222.489 181.866 227.178 177.178C231.866 172.489 234.5 166.13 234.5 159.5V122C227.87 122 221.511 119.366 216.822 114.678C212.134 109.989 209.5 103.63 209.5 97C209.5 90.3696 212.134 84.0107 216.822 79.3223C221.511 74.6339 227.87 72 234.5 72V34.5C234.5 27.8696 231.866 21.5107 227.178 16.8223C222.489 12.1339 216.13 9.5 209.5 9.5H34.5C27.8696 9.5 21.5107 12.1339 16.8223 16.8223C12.1339 21.5107 9.5 27.8696 9.5 34.5V72C16.1304 72 22.4893 74.6339 27.1777 79.3223C31.8661 84.0107 34.5 90.3696 34.5 97C34.5 103.63 31.8661 109.989 27.1777 114.678C22.4893 119.366 16.1304 122 9.5 122V159.5C9.5 166.13 12.1339 172.489 16.8223 177.178C21.5107 181.866 27.8696 184.5 34.5 184.5H209.5Z"
                    stroke="black"
                    stroke-opacity="0.54"
                    stroke-width="18.75"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  />
                </svg>
              </div>
              <div className="mx-2">
                <h3 className="mb-0 text-sm text-right font-medium text-primary-500 ">
                  افزودن کد تخفیف{" "}
                </h3>
                <p className="mb-0 text-[12px] text-gray-500">
                  کد تخفیف خود را وارد کنید
                </p>
              </div>
            </div>

            <div className="pl-3">
              <span className="text-[30px] opacity-60">+</span>
            </div>
          </div>
        </div>

        <div className="">
          <div className="text-right flex rtl justify-between border-y-[1px] border-gray-100 my-3 px-4 ">
            <p className="mb-0 text-sm font-semibold py-4">حساب نهایی</p>

            <div className="bg-primary-200 w-fit h-fit relative my-3 p-1 rounded-lg">
              <p className="mb-0 text-[11px] text-white rtl">مشاهده اقلام</p>
            </div>
          </div>

          <div>
            <div className="flex justify-between rtl px-4">
              <p className="mb-0 text-[12px] text-gray-500">قیمت </p>

              <div className="flex justify-center">
                <p className="mb-0 ">
                  <PersianNumber
                    number={checkOutData?.totalProductsPrice?.toLocaleString()}
                    style={"!text-[14px] !font-semibold"}
                  />
                </p>
                <small className="text-gray-500 text-[12px] mt-1 mx-1">
                  {" "}
                  تومان
                </small>
              </div>
            </div>

            <div className="flex justify-between rtl my-2 px-4">
              <p className="mb-0 text-[12px] text-gray-500">تخفیف محصول</p>

              <div className="flex justify-center">
                <p className="mb-0 ">
                  <PersianNumber
                    number={checkOutData?.discountPrice?.toLocaleString()}
                    style={"!text-[14px] !font-semibold"}
                  />
                </p>
                <small className="text-gray-500 text-[12px] mt-1 mx-1">
                  {" "}
                  تومان
                </small>
              </div>
            </div>

            <div className="flex justify-between rtl my-2 px-4">
              <p className="mb-0 text-[12px] text-gray-500">هزینه بسته بندی</p>

              <div className="flex justify-center">
                <p className="mb-0 ">
                  <PersianNumber
                    number={checkOutData?.packingPrice?.toLocaleString()}
                    style={"!text-[14px] !font-semibold"}
                  />
                </p>
                <small className="text-gray-500 text-[12px] mt-1 mx-1">
                  {" "}
                  تومان
                </small>
              </div>
            </div>

            <div className="flex justify-between rtl my-2 px-4">
              <p className="mb-0 text-[12px] text-gray-500">هزینه ارسال</p>

              <div className="flex justify-center">
                <p className="mb-0 ">
                  <PersianNumber
                    number={checkOutData?.deliveryPrice?.toLocaleString()}
                    style={"!text-[14px] !font-semibold"}
                  />
                </p>
                <small className="text-gray-500 text-[12px] mt-1 mx-1">
                  {" "}
                  تومان
                </small>
              </div>
            </div>

            <div className="flex justify-between bg-primary-100 p-3 rtl my-2">
              <p className="mb-0 text-sm text-primary-600 font-bold">
                قابل پرداخت
              </p>

              <div className="flex justify-center">
                <p className="mb-0 ">
                  <PersianNumber
                    number={checkOutData?.totalPrice?.toLocaleString()}
                    style={"!text-[14px] !font-semibold text-primary-800"}
                  />
                </p>
                <small className="text-gray-500 text-[12px] mt-1 mx-1">
                  {" "}
                  تومان
                </small>
              </div>
            </div>
          </div>
        </div>

        <NavBarDownCart
          calculateTotalCost={checkOutData.totalPrice}
          event={() => console.log("D")}
        />
      </div>

      <BottomSheetDiscount />
    </>
  );
};

export default page;
