import React, { FC, useState, useRef } from "react";
import CartHeader from "../CartHeader/CartHeader";
export interface CartSideBarProps {
  label?: string;
}

export const CartSideBar: FC<CartSideBarProps> = (props: any) => {
  const countRef = useRef<string>("not-wait");
  const [, setWaiter] = useState<string>("not-wait");
  const handle = () => {
    countRef.current = "wait";
    setWaiter(countRef.current);
  };

  const unhandle = () => {
    countRef.current = "not-wait";
    setWaiter(countRef.current);
  };
  return (
    <div
      className={`relative w-full h-full `}
      onMouseEnter={() => {
        handle();
      }}
      onMouseLeave={() => {
        unhandle();
      }}
    >
      {" "}
      <CartHeader />
      <div className="relative h-[calc(100%-235px)] overflow-x-hidden overflow-y-scroll 2xl:h-[calc(100%-16.319vw)] no-scrollbar">
        <div className="tw-container ">
          {props.children ? (
            <>{props.children}</>
          ) : (
            <div className="absolute top-2/4 -translate-y-2/4">
              <div className="text-h5 md:text-h5-md lg:text-h5-lg 2xl:text-h5-2xl font-normal text-lnk">
                {"Your bag is empty"}
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};
export default CartSideBar;