import { Metadata } from "next";

import LeftSectionImageHeadline from "@/components/common/left-section-image-headline";
import Login from "@/components/pages/participant/login";

export const metadata: Metadata = {
  title: "Log in",
  description:
    "Access your People for Research participant account. Log in to find and apply to new paid research opportunities and manage or update your profile.",
  openGraph: {
    title: "Log in",
    description:
      "Access your People for Research participant account. Log in to find and apply to new paid research opportunities and manage or update your profile.",
    images: [
      {
        url: "/global-assets/pfr-logo-og-participant.svg",
        alt: "People for Research logo, featuring a person inside a circle, representing a focus on human-centered research and activities.",
        width: 200,
        height: 150,
      },
    ],
  },
  twitter: {
    card: "summary_large_image",
    title: "Log in",
    images: "/global-assets/pfr-logo-og-participant.svg",
    description:
      "Access your People for Research participant account. Log in to find and apply to new paid research opportunities and manage or update your profile.",
  },
};

export const dynamic = "force-dynamic";

export default async function LoginPage({
  searchParams,
}: {
  searchParams: Record<string, string>;
}) {
  const { email, jobIdRef, emailUpdated, ...rest } = searchParams;

  const utmParams: Record<string, string> = {};
  Object.entries(rest).forEach(([key, value]) => {
    if (key.startsWith("utm_") && value) {
      utmParams[key] = value;
    }
  });

  return (
    <div className="flex flex-col xl:flex-row bg-participant-light dark:bg-[#383934]">
      <LeftSectionImageHeadline isSignup={false} />
      <Login
        email={email}
        emailUpdated={emailUpdated}
        jobIdRef={jobIdRef}
        utmParams={utmParams}
      />
    </div>
  );
}