import { Metadata } from "next";
import { cookies } from "next/headers";
import { parsePhoneNumber } from "awesome-phonenumber";

import VerifyAccount from "@/components/pages/participant/sign-up/verify-account";
import LeftSectionImageHeadline from "@/components/common/left-section-image-headline";
import { decryptCookie } from "@/utils/cookie-utils";
import { CreateUserData } from "@/types/signup/user-signup-types";
import { COOKIE_SIGNUP_USER_DATA } from "@/constants/cookie-mapping";

export const metadata: Metadata = {
  title: "Verify account | Signup",
};

export default async function VerifyAccountPage() {
  const encUserData = cookies().get(COOKIE_SIGNUP_USER_DATA)?.value;
  const userData = encUserData && decryptCookie(encUserData);
  const parsedUserData = userData && JSON.parse(userData);
  const { phoneNumber } = parsedUserData as CreateUserData;

  if (phoneNumber) {
    const parsedPhoneNumber = parsePhoneNumber(phoneNumber);
    parsedUserData.phoneNumber = parsedPhoneNumber.number?.international;
  }

  return (
    <div className="flex flex-col xl:flex-row bg-participant-light dark:bg-[#383934]">
      <LeftSectionImageHeadline isSignup />
      <VerifyAccount phoneNumber={phoneNumber} />
    </div>
  );
}