import { Button, Row } from "antd";
import ProHeader from "components/ProHeader/ProHeader";
import { useTranslation } from "react-i18next";
import { Link, useParams } from "react-router-dom";
import { useAppSelector } from "redux/hooks";
import { ProBlack2 } from "ThemeConstants";
import OrdersList from "./OrdersList";

export default function OrdersPage() {
  const { t } = useTranslation();
  const { id } = useParams();
  const { themeName } = useAppSelector((state) => state.theme);

  return (
    <>
      <ProHeader>{t("orders.title")}</ProHeader>
      <OrdersList />
      <Row
        style={{
          width: "100%",
          padding: "16px 16px 0",
          position: "fixed",
          bottom: 0,
          left: 0,
          boxShadow: "0px -1px 3px rgba(0, 0, 0, 0.1)",
          backgroundColor: themeName === "light" ? "white" : ProBlack2,

        }}
      >
        <Link to={`/${id}/menu`} style={{ width: "100%" }}>
          <Button
            type="primary"
            shape="round"
            style={{ width: "100%", height: 48, marginBottom: 16 }}
          >
            {t('orders.browseMenu')}
          </Button>
        </Link>
      </Row>
    </>
  );
}
