import Link from "next/link";

import { INTERNAL_PAGES } from "@/constants/pages-mapping/internal-pages-mapping";

type HeadlineProps = {
  isPastOpps?: boolean;
};

function Headline({ isPastOpps = false }: HeadlineProps) {
  const title = isPastOpps ? "Past opportunities" : "Opportunities";
  const subtitle = isPastOpps
    ? "View the projects our team worked on in the last 90 days."
    : "Browse our latest paid research studies, which our team is currently recruiting for.";

  const linkTitle = isPastOpps ? (
    <>
      Looking for our live opportunities? Explore them on the{" "}
      <Link
        className="underline underline-offset-2 decoration-dotted cursor-pointer font-semibold"
        href={INTERNAL_PAGES.participant.opportunities.main}
      >
        current opportunities page
      </Link>{" "}
      to browse and apply to take part in our research studies.
    </>
  ) : null;

  return (
    <div className="flex flex-col p-8 xl:ps-8 text-center xl:text-start">
      <h1 className="font-inter font-black text-4xl text-black dark:text-white text-center xl:text-start tracking-tight">
        {title}
      </h1>
      <h2 className="font-noto font-medium text-xl mt-2">{subtitle}</h2>
      {linkTitle ? (
        <h3 className="font-noto font-medium text-sm mt-8">{linkTitle}</h3>
      ) : null}
    </div>
  );
}

export default Headline;