"use client";

import Link from "next/link";

import { INTERNAL_PAGES } from "@/constants/pages-mapping/internal-pages-mapping";
import type { AnnouncementContent } from "@/lib/homepage-ghost-content";

type AnnouncementBannerProps = { content: AnnouncementContent };

function AnnouncementBanner({ content }: AnnouncementBannerProps) {
  return (
    <div
      aria-live="polite"
      className="bg-jet dark:bg-paleBlue p-4 text-white dark:text-black"
      role="banner"
    >
      <p className="text-center text-xs lg:text-sm font-noto font-medium">
        {content.message}{" "}
        <Link
          className="underline decoration-dotted underline-thickness-thin hover:underline-thickness-thick hover:text-white/90 dark:hover:text-jet/90"
          href={`${INTERNAL_PAGES.participant.howItWorks.policies}/terms-and-conditions-for-attending-a-session`}
        >
          {content.linkLabel}
        </Link>
      </p>
    </div>
  );
}

export default AnnouncementBanner;