import { PlusOutlined } from "@ant-design/icons";
import { Button } from "antd";
import { useTranslation } from "react-i18next";
import { useNavigate, useParams } from "react-router-dom";
import { useAppSelector } from "redux/hooks.ts";
import { colors } from "ThemeConstants.ts";
import styles from "./AddToCartButton.module.css";

export function AddToCartButton() {
  const { isRTL } = useAppSelector((state) => state.locale);
  const { t } = useTranslation();

  const { subdomain } = useParams();
  const navigate = useNavigate();

  return (
    <Button
      shape="round"
      title="add"
      iconPosition="start"
      icon={<PlusOutlined title="add" className={styles.plusIcon} />}
      size="small"
      onClick={() => {
        navigate(`/${subdomain}/menu`);
      }}
      className={`${styles.addButton} ${isRTL ? styles.addButtonRTL : styles.addButtonLTR}`}
      style={{ backgroundColor: colors.primary }}
    >
      {t("common.add")}
    </Button>
  );
}
