import { IoClose } from "react-icons/io5";

import { dismissMaintenanceBanner } from "@/services/general-actions";

type UnderMaintenanceBannerProps = {
  endDate: string;
  formattedDate: string;
  formattedTime: string;
};

/**
 * This component is intentionally a Server Component (no "use client").
 * using a client component here caused hydration mismatches in dev mode.
 * dismiss action is handled via a form action bound to a server action instead!
 */
function UnderMaintenanceBanner({
  endDate,
  formattedDate,
  formattedTime,
}: UnderMaintenanceBannerProps) {
  const dismissAction = dismissMaintenanceBanner.bind(null, endDate);

  return (
    <div
      aria-live="polite"
      className="bg-warning-500 dark:bg-warning-400 p-4 text-black relative"
      role="banner"
    >
      <p className="text-center text-sm lg:text-base font-noto font-medium pr-8">
        On {formattedDate}, our participant website will be down for essential
        maintenance from {formattedTime}. This means you won&apos;t be able to
        view or apply for any research opportunities during the downtime.
      </p>
      <p className="text-center text-sm lg:text-base font-noto font-medium pr-8">
        Please bear with us, we&apos;ll be up and running after a few hours and
        you&apos;ll be able to apply for opportunities as normal.
      </p>
      <form action={dismissAction}>
        <button
          aria-label="Dismiss maintenance banner"
          className="absolute top-3 right-3 p-1 rounded-md hover:bg-black/10 transition-colors"
          type="submit"
        >
          <IoClose className="h-5 w-5 text-black" />
        </button>
      </form>
    </div>
  );
}

export default UnderMaintenanceBanner;