import { Metadata } from "next";
import { cookies } from "next/headers";

import { CORE_ENDPOINTS } from "@/constants/api-mappings/external-api-mapping";
import EmploymentInformation from "@/components/pages/participant/sign-up/employment-information";
import LeftSectionImageHeadline from "@/components/common/left-section-image-headline";
import { decryptCookie } from "@/utils/cookie-utils";
import { getOptions } from "@/services/general-actions";
import { COOKIE_SIGNUP_USER_DATA } from "@/constants/cookie-mapping";
import { CreateUserData } from "@/types/signup/user-signup-types";

export const metadata: Metadata = {
  title: "Employment Information | Signup",
};

export default async function EmploymentInformationPage() {
  const optionEndpoints = [
    CORE_ENDPOINTS.options.seniority,
    CORE_ENDPOINTS.options.industry,
  ];

  const [seniorityOptions, industryOptions] = await Promise.all(
    optionEndpoints.map((endpoint) => getOptions(endpoint))
  );

  const encUserData = cookies().get(COOKIE_SIGNUP_USER_DATA)?.value;
  const userData = encUserData && decryptCookie(encUserData);
  const parsedUserData = userData && JSON.parse(userData);
  const { firstName } = parsedUserData as CreateUserData;

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