import styles from './Menu.module.css'
import {useRouter} from "next/router";
import useTranslation from 'next-translate/useTranslation'
import {useEffect} from "react";
import { useAlert } from 'react-alert'
import Icon from "./Icon";

type Props = {
    route?: string,
    onClick?: () => void
}



export default function Menu(props: Props) {
    const router = useRouter()
    const { t, lang } = useTranslation('common')
    const alert = useAlert()

    return (
        <div onClick={props.onClick} className={styles.container}>
            <Icon
                isSelected={router.pathname.includes('param')} text={lang.toUpperCase()} onClick={() => router.push('/parametre')} />

            <Icon isSelected={router.pathname.includes('qrcode')}  imagePath={'/icon/qr-code.svg'}
                  imageSelectPath={'/icon/selected/qr-code.svg'} onClick={() => router.push('/qrcode')} />

            <Icon isSelected={router.pathname === '/'} imagePath={'/icon/headphone.svg'}
                  imageSelectPath={'/icon/selected/headphone.svg'}  onClick={() => router.push('/')} />
            <Icon  isSelected={router.pathname.includes('info')}imagePath={'/icon/info.svg'}
                   imageSelectPath={'/icon/selected/info.svg'} onClick={() => router.push('/info')} />
            {/*<Icon isSelected={router.pathname.includes('parametre')} imagePath={'/icon/param.jpg'}*/}
            {/*      imageSelectPath={'/icon/selected/param.jpg'} onClick={() => router.push('/parametre')} />*/}
        </div>
    )
}