import { useSelector } from 'react-redux';
import { IRootState } from '@/store';
import Image from 'next/image';

const ComingSoonDisplay = () => {
    const isDark = useSelector((state: IRootState) => state.themeConfig.theme === 'dark' || state.themeConfig.isDarkMode);

    return (
        <div className="pt-5">
            <div className="relative flex min-h-screen items-center justify-center overflow-hidden">
                <div className="px-6 py-16 text-center font-semibold before:container before:absolute before:left-1/2 before:aspect-square before:-translate-x-1/2 before:rounded-full before:bg-[linear-gradient(180deg,#4361EE_0%,rgba(67,97,238,0)_50.73%)] before:opacity-10 md:py-20">
                    <div className="relative">
                        <Image
                            width={500}
                            height={500}
                            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">Coming Soon</h2>
                            <p className="text-base">
                                We are currently working on making some improvements <br className="hidden sm:block" />
                                to give you better user experience. <br />
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};
export default ComingSoonDisplay;