"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 GiftPaymentSuccess() {
  const { t } = useTranslation("common");
  const searchParams = useSearchParams();
  const receiverId = searchParams.get("receiverId");
  const receiverUsername = searchParams.get("receiverUsername");

  return (
    <Container>
      <h6 className="mb-4 mt-10 line-clamp-2 text-center text-lg font-bold text-[#17A600] md:text-xl">
        {t("giftPage.paymentSuccess.title")}
      </h6>
      <div className="flex flex-col items-center text-sm">
        <Image
          width={50}
          height={50}
          alt="success icon"
          src="/images/icons/success.svg"
          className="mb-5 pb-1"
        />
        <p className="my-5 px-4 text-center">
          {t("giftPage.paymentSuccess.message")}
        </p>
      </div>
      <div className="mt-6 flex justify-center gap-4">
        {receiverId && receiverUsername ? (
          <Link href={`/settings/chats/${receiverUsername}/${receiverId}`}>
            <RoundedButton variant="primary" className="h-9 w-36">
              {t("giftPage.paymentSuccess.sendMessage")}
            </RoundedButton>
          </Link>
        ) : null}
        <Link href="/">
          <RoundedButton variant="primary" className="h-9 w-36">
            {t("giftPage.paymentSuccess.later")}
          </RoundedButton>
        </Link>
      </div>
    </Container>
  );
}

export default GiftPaymentSuccess;
