"use client";

import Container from "@/components/elements/Container";
import RoundedButton from "@/components/elements/RoundedButton";
import LocalePageShell from "@/components/i18n/LocalePageShell";
import { useRouter, useSearchParams } from "next/navigation";
import Image from "next/image";
import { useTranslation } from "react-i18next";

export default function ShopPaymentSuccessPage() {
  const { t } = useTranslation("common");
  const router = useRouter();
  const searchParams = useSearchParams();
  const orderId = searchParams.get("orderId");

  return (
    <LocalePageShell>
      <Container>
        <h6 className="mb-4 mt-2 text-center text-lg font-bold text-green-600 md:text-xl">
          {t("shops.paymentSuccessTitle")}
        </h6>
        <div className="flex flex-col items-center text-sm">
          <Image
            width={50}
            height={50}
            alt=""
            src="/images/icons/success.svg"
            className="mb-5 pb-1"
          />
          <span>{t("shops.paymentSuccessHint")}</span>
        </div>
        <div className="mt-10 flex flex-col items-center gap-4">
          <RoundedButton
            variant="primary"
            className="h-9 w-48"
            onClick={() =>
              router.push(orderId ? `/shops/orders/${orderId}` : "/settings/shop")
            }
          >
            {t("shops.viewOrder")}
          </RoundedButton>
          <RoundedButton
            className="!border-transparent h-9 w-48 !bg-neutral-100 text-neutral-600 dark:!bg-neutral-800 dark:text-neutral-300"
            onClick={() => router.push("/")}
          >
            {t("shops.backToHome")}
          </RoundedButton>
        </div>
      </Container>
    </LocalePageShell>
  );
}
