"use client";

import CardCart from "@comp/Cards/CardCart/page";
import AppContext from "@ctx/AppContext";
import Link from "next/link";
import PersianNumber from "plugins/PersianNumber";
import { useContext } from "react";
import { BottomSheet } from "react-spring-bottom-sheet";

const BottomSheetCart = (props) => {
  const CTX = useContext(AppContext);
  const cart = CTX.state.cart;

  return (
    <BottomSheet
      open={CTX.state.bottomSheetCartOpen}
      onDismiss={() => CTX.setBottomSheetCartOpen(false)}
      className={"z-50 relative"}
    >
      <div className="text-center p-3">
        <p className="mb-0 text-sm  pb-3">
          <PersianNumber
            number={cart?.length}
            style="text-xl font-bold text-base font-bold mx-2 !text-primary-500"
          />
          محصول موجود در سبد
        </p>

        {/* <div className="w-5/12 mx-auto h-[1px] bg-gray-200 my-3"></div> */}
        <div>
          {cart.map((e, index) => (
            <CardCart key={index} data={e} />
          ))}
        </div>
      </div>

      <div className="w-full p-3 ">
        {/* <div className="">
                <p className="mb-0 text-sm p-3">
                  جمع کل :
                  <PersianNumber
                    number={2546385}
                    style="text-lg mr-2 font-bold text-gray-500"
                  />
                  <small className="mr-1 mt-[6px]">تومان</small>
                </p>
              </div> */}
        <Link href={"/cart"}>
          <button className="btn btn-primary text-sm w-full py-3 rounded-3xl">
            {" "}
            ثبت خرید
          </button>
        </Link>
      </div>
    </BottomSheet>
  );
};

export default BottomSheetCart;