import { colors } from "ThemeConstants.ts";
import { Link, useParams } from "react-router-dom";
import { Button } from "antd";
import { useAppSelector } from "redux/hooks.ts";
import useBreakPoint from "hooks/useBreakPoint.ts";
import { useTranslation } from "react-i18next";
import { selectCart } from "features/order/orderSlice.ts";
import styles from "./footer.module.css";

export default function CartFooter() {
  const { t } = useTranslation();
  const { items } = useAppSelector(selectCart);
  const { id } = useParams();
  const { isMobile, isTablet } = useBreakPoint();
  const orderType = localStorage.getItem("orderType");

  return (
    <div className={styles.cartFooter}>
      <Link
        to={`/${id}/menu?${orderType ? `orderType=${orderType}` : ""}`}
        style={{
          width: "100%",
        }}
      >
        <Button
          style={{
            borderRadius: 100,
            height: isMobile ? 48 : isTablet ? 56 : 64,
            borderColor: "black",
            width: "100%",
            fontSize: 16,
          }}
        >
          {t("cart.addItem")}
        </Button>
      </Link>

      <Link
        to={`/${id}/checkout`}
        style={{
          width: "100%",
        }}
      >
        <Button
          style={{
            backgroundColor: colors.primary,
            borderRadius: 100,
            height: isMobile ? 48 : isTablet ? 56 : 64,
            borderColor: "#F2F2F2",
            fontSize: 16,
            color: "white",
            width: "100%",
          }}
          disabled={items.length === 0}
        >
          {t("cart.checkout")}
        </Button>
      </Link>
    </div>
  );
}