"use client";

import { Typography } from "@material-tailwind/react";
import Image from "next/image";

import emptyBox from "../../public/img/empty-box.png";
import { ROUTES } from "../constants/routes";
import useCustomRouter from "../hooks/useCustomRouter";
import { _useScopedI18n } from "../i18n/client";
import ButtonCustom from "./Button";

export default function OrderNotFoundComponent() {
  //
  const scopeT = _useScopedI18n("sharedComponents.orderNotFoundComponent");

  const { push } = useCustomRouter();

  return (
    <>
      <div className="px-3 md:px-5 mr-1 flex cartAutoHeight">
        <div className="">
          <ul className="flex flex-col gap-y-6">{}</ul>
        </div>
        <div className="flex items-center justify-center flex-col w-full">
          <Image
            src={emptyBox.src}
            alt="emptyBox"
            width={100}
            height={100}
            className="mb-5"
          />
          <Typography
            variant="h6"
            className="text-center md:text-lg font-semibold text-black-500 mb-5"
          >
            {scopeT("title")}
          </Typography>
          <Typography
            variant="h6"
            className="text-center font-medium text-slate-400"
          >
            {scopeT("message")}
          </Typography>

          <ButtonCustom
            onClick={() => push(ROUTES.dashboard.orders)}
            className="font-normal mt-7"
            icon={undefined}
          >
            {scopeT("redirectBtn")}
          </ButtonCustom>
        </div>
      </div>
    </>
  );
}
