"use client";

import Link from "next/link";
import { FiCheck } from "react-icons/fi";

import { SUPPORT_EMAIL } from "@/constants/signup-form-constants";
import { PostData } from "@/types/blog/blogTypes";
import Insights from "@/components/pages/client/typeform/insights";
import Breadcrumbs from "@/components/common/breadcrumbs";

type ThankYouTypeformProps = {
  recentPosts: PostData;
};

function ThankYouTypeform({ recentPosts }: ThankYouTypeformProps) {
  const { posts } = recentPosts;

  return (
    <div className="flex flex-col min-h-screen py-12">
      <section className="flex flex-col items-center text-center px-6 pb-16 space-y-8">
        <Breadcrumbs />

        <div className="w-14 h-14 rounded-full bg-userViewingBlue dark:bg-paleBlue text-white dark:text-black flex items-center justify-center mb-8">
          <FiCheck size={24} strokeWidth={2.5} />
        </div>

        <h1 className="font-inter font-black text-3xl md:text-5xl">
          Thanks for submitting your request.
        </h1>

        <p className="text-lg leading-relaxed max-w-xl">
          We&apos;ll review your message and get back to you as soon as
          possible. In the meantime, why not browse our latest insights?
        </p>

        <div className="w-24 h-1 my-10 bg-userViewingBlue dark:bg-paleBlue" />

        <span className="text-base">
          Need further assistance? Email our{" "}
          <Link
            className="underline underline-offset-2 decoration-dotted cursor-pointer text-midnightBlue dark:text-paleBlue font-semibold"
            href={`mailto:${SUPPORT_EMAIL}`}
          >
            support team
          </Link>
          .
        </span>
      </section>

      <Insights recentPosts={posts} />
    </div>
  );
}

export default ThankYouTypeform;