import { Divider } from '@mui/material'
import styles from './guide.module.scss'

interface GuideProps {
    page
}

const Guide: React.FC<GuideProps> = ({
    page
}) => {

    return (
        <main className="w-screen h-screen fixed top-0 left-0 backdrop-blur-sm z-40 flex justify-center items-center">
            <div className={styles.bg}>
                <h1>Guide Utilisateur</h1>
                <Divider />
                {

                    page === "image" ? 

                        <p>
                            
                        </p> : 
                    
                    page === "galerie" ? 

                        <p>
                            
                        </p> : 

                    page === "entree" ? 
                        (
                            <div className='flex items-center mt-10 '>
                                <p >
 
                                </p>
                            </div>
                        )  : <></>

                }
            </div>
        </main>
    )
}
export default Guide

    const [isOpen, setIsOpen] = useState(false)

    const handleClick = () => {
        setIsOpen(true)
        if (isOpen === true) {
            setIsOpen(false)
        }
    }

            <Image 
                    src={'/images/info-logo.png'}
                    width={35}
                    height={35}
                    alt='logo'
                    onClick={handleClick}
                    className='fixed top-10 right-44 z-50 cursor-pointer info'
            />
            {isOpen ? (
                <Guide page="galerie" />
            ) : <></>}

.bg {
    animation: open-animation 1s ease;
}
@keyframes open-animation {
    0% {
        transform: translateY(-50px);
    }
    100% {
        transform: translate(0);
    }
}