import WithAuth from "@/components/auth/WithAuth";
import Link from "@/components/elements/Link";
import Header from "@/components/layouts/Header";
import Layout from "@/components/layouts/Layout";
import { useAuth } from "@/core/utils/auth";
import { EnvelopeIcon } from "@heroicons/react/24/outline";
import { useRouter } from "next/router";

export default function FinishQuotation() {
  const router = useRouter();
  const { id } = router.query;
  const [ auth ] = useAuth();

  return (
    <WithAuth>
      <Layout>
        <Header title="Penawaran Harga" />

        <div className="m-4 px-4 py-6 shadow-md border border-gray_r-3">
          <div className="flex">
            <span className="p-3 mx-auto bg-yellow_r-3 border border-yellow_r-6 rounded">
              <EnvelopeIcon className="w-8 text-yellow_r-11" />
            </span>
          </div>
          <p className="h2 text-center mt-6">
            Terima Kasih { auth?.name }
          </p>
          <p className="text-center mt-3 leading-6 text-gray_r-11">
            Penawaran harga kamu di Indoteknik.com berhasil dikirimkan, tim kami akan segera menghubungi anda.
          </p>
          { id && (
            <Link href={`/my/transaction/${id}`} className="btn-yellow text-gray_r-12 mt-6 w-full">Lihat Penawaran</Link>
          )}
          <Link href="/" className="btn-light text-gray_r-12 mt-2 w-full">Ke Halaman Utama</Link>
        </div>
      </Layout>
    </WithAuth>
  );
}