"use client";
import { useEffect, useRef } from "react";
import Link from "next/link";

const CalendarRestrictedNotice = () => {
   const marqueeRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    const marquee = document.createElement("marquee");
    marquee.setAttribute("behavior", "scroll");
    marquee.innerHTML =
      '<p class="calendar-marquee-text">Calendars are only available to RKDA students. If you are an RKDA member, please login to see this page.</p>';

    marquee.onmouseover = () => (marquee as any).stop();
    marquee.onmouseout = () => (marquee as any).start();

    marqueeRef.current?.appendChild(marquee);

    return () => {
      marquee.remove();
    };
  }, []);
  return (
    <section className="aboutinnercontainer academycontainer calendarcontainer">
      <div className="container container-xxl">
        <div className="row justify-content-center">
          <div className="col-xxl-8 col-xl-8 col-lg-8 col-md-10 col-sm-12 col-12">
            <div className="d-flex flex-column align-items-center justify-content-center text-center">
              <div ref={marqueeRef} />
              <Link href="/student/login" className="theme-btn mb-3">
                Click here to login
              </Link>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default CalendarRestrictedNotice;