import { useSelector } from 'react-redux';
import { Link } from 'react-router-dom';
import { IRootState } from '../store';
import { useTranslation } from 'react-i18next';

const Maintenence = ({ page }: { page: string }) => {
    const isDark = useSelector((state: IRootState) => state.themeConfig.theme === 'dark' || state.themeConfig.isDarkMode);
    const { t } = useTranslation();

    return (
        <div className="relative flex min-h-screen items-center justify-center overflow-hidden">
            <div className="px-6 text-center font-semibold">
                <div className="relative">
                    <img
                        src={isDark ? '/assets/images/error/maintenence-dark.svg' : '/assets/images/error/maintenence-light.svg'}
                        alt="maintenence"
                        className="mx-auto -mt-10 w-full max-w-xs object-cover md:-mt-20 md:max-w-lg"
                    />
                    <div className="-mt-8 font-semibold dark:text-white">
                        <h2 className="mb-5 text-3xl font-bold text-primary md:text-5xl">
                            {t('under_maintenance')} {page}
                        </h2>
                        <h4 className="mb-7 text-xl sm:text-2xl">{t('thank_you')}</h4>
                        <p className="text-base">
                            {t('we_are_currently_working')} <br className="hidden sm:block" />
                            {t('to_give_you_better_user_experience')} <br />
                            <br />
                            {t('please_visit_us_againShortly')}
                        </p>
                    </div>
                    <Link to="/" className="btn btn-primary mx-auto !mt-7 w-max border-0 uppercase shadow-none">
                        {t('home')}
                    </Link>
                </div>
            </div>
        </div>
    );
};

export default Maintenence;
