"use client";

import Container from "@/components/elements/Container";
import RoundedButton from "@/components/elements/RoundedButton";
import { useSearchParams } from "next/navigation";
import Image from "next/image";
import Link from "next/link";
import { useTranslation } from "react-i18next";

function GiftPaymentFailed() {
  const { t } = useTranslation("common");
  const searchParams = useSearchParams();
  const receiverId = searchParams.get("receiverId");

  return (
    <Container>
      <h6 className="mb-10 mt-20 line-clamp-2 text-center text-lg font-bold text-[#FF0000] md:text-xl">
        {t("giftPage.paymentFailed.title")}
      </h6>
      <div className="flex flex-col items-center text-sm">
        <Image
          width={50}
          height={50}
          alt="failed icon"
          src="/images/icons/failed.svg"
          className="mb-8 pb-1"
        />
        <span>{t("giftPage.paymentFailed.message")}</span>
      </div>
      {receiverId ? (
        <Link className="mt-8 flex flex-col items-center" href={`/gift/${receiverId}`}>
          <RoundedButton variant="primary" className="h-9 w-32">
            {t("giftPage.paymentFailed.retry")}
          </RoundedButton>
        </Link>
      ) : null}
    </Container>
  );
}

export default GiftPaymentFailed;
