'use client';

import { RootState } from '@/app/_globalRedux/store';
import { Alert } from 'antd';
import React, { useEffect, useState } from 'react';
import Marquee from 'react-fast-marquee';
import { useSelector } from 'react-redux';

function InfoBanner() {
	const [isAlertValid, setIsAlertValid] = useState(false);
	const [paymentAlert, setPaymentAlert] = useState(false);
	const { payment } = useSelector((state: RootState) => state.auth);

	useEffect(() => {
		const currentDateObj = new Date();
		const currentDate = currentDateObj.getDate();
		const currentMonth = currentDateObj.getMonth() + 1;

		const currentHour = currentDateObj.getHours();

		if (currentDate === 27 && currentMonth === 11 && currentHour <= 16) {
			setIsAlertValid(true);
		}

		if (payment === 1) return setPaymentAlert(true);
	}, []);
	return (
		<>
			{isAlertValid ? (
				<div className='z-20 absolute left-0 top-0 w-full'>
					<Alert
						type='warning'
						message={
							<Marquee pauseOnHover gradient={false} speed={30}>
								{' '}
								We will be upgrading our backend, You may experience some issues between 2:30 PM to 3:00 PM. We appreciate your understanding and
								support during this time.
							</Marquee>
						}
						banner
					/>
				</div>
			) : null}
			{paymentAlert ? (
				<div className='z-20 absolute left-0 top-0 w-full'>
					<Alert
						type='warning'
						message={
							<Marquee pauseOnHover gradient={false} speed={30}>
								This is to inform you that your services may be interrupted by this evening due to delay in payments.
							</Marquee>
						}
						banner
					/>
				</div>
			) : null}
		</>
	);
}

export default InfoBanner;