"use client";

import Container from "@/components/elements/Container";
import { User } from "@/types/types";
import useAxios from "@/hooks/useAxios";
import React, { useEffect, useState } from "react";
import RoundedButton from "@/components/elements/RoundedButton";
import { useSearchParams } from "next/navigation";
import Image from "next/image";
import Link from "next/link";

function SuccessBillboard() {
  const { request } = useAxios();
  const searchParams = useSearchParams();
  const userId = searchParams.get("userId");

  const [userDetail, setUserDetail] = useState<User | null>(null);
  useEffect(() => {
    const fetchStates = async () => {
      const response = await request<{ user: User }>(
        "GET",
        `/users/get?user_id=${userId}`
      );
      setUserDetail(response?.user);
    };
    fetchStates();
  }, []);

  return (
    <Container>
      <h6 className="font-bold md:text-xl text-lg text-center mt-10 line-clamp-2 mb-4 text-[#17A600] ">
        پرداخت موفق
      </h6>
      <div className="flex flex-col items-center text-sm">
        <Image
          width={50}
          height={50}
          alt={"verify icon"}
          src={`/images/icons/success.svg`}
          className="pb-1 mb-5"
        />
      </div>
      <div className="px-4 w-full text-sm md:text-md font-semibold mt-10">
        <div className="flex flex-col items-center gap-4 mt-4">
          <p className="my-5">
            یک درخواست همکاری برای کاربر {userDetail?.user_name} ثبت شد
          </p>
          <div className="grid grid-cols-2 gap-4">
            <Link href={`/settings/chats/${userDetail?.user_name}/${userId}`}>
              <RoundedButton className="w-32 h-9 !border-[#0C8002] text-[#0C8002]">
                ارسال پیام
              </RoundedButton>
            </Link>
            <Link href={"/"}>
              <RoundedButton className="w-32 h-9 !border-[#0C8002] text-[#0C8002]">
                بعدا
              </RoundedButton>
            </Link>
          </div>
        </div>
      </div>
    </Container>
  );
}

export default SuccessBillboard;
