"use client";

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

function FailedBillboard() {
  const searchParams = useSearchParams();
  const userId = searchParams.get("userId");

  return (
    <Container>
      <h6 className="font-bold md:text-xl text-lg text-center mt-20 line-clamp-2 mb-10 text-[#FF0000] ">
        پرداخت ناموفق
      </h6>
      <div className="flex flex-col items-center text-sm">
        <Image
          width={50}
          height={50}
          alt={"verify icon"}
          src={`/images/icons/failed.svg`}
          className="pb-1 mb-8"
        />
        <span> پرداخت شما با خطا مواجه شد. </span>
      </div>
      <Link
        className="flex items-center flex-col mt-8"
        href={`/offer/${userId}`}
      >
        <RoundedButton className="w-32 h-9 !border-[#0C8002] text-[#0C8002]">
          پرداخت مجدد
        </RoundedButton>
      </Link>
    </Container>
  );
}

export default FailedBillboard;
