import Head from 'next/head'
import styles from './Header.module.css'
import {useRouter} from "next/router";
import useTranslation from 'next-translate/useTranslation'

type HeaderProps = {
    title?: string,
    subTitle?: string,
    hideBanner?: boolean,
    isNotTransaltion?: boolean,
    confirmText?: string,
    chooseLanguage?: boolean,
    relative?: boolean
}

export default function Header(props: HeaderProps) {
    const router = useRouter()
    const { t, lang } = useTranslation('common')


    return (
        <div>
            <Head>
                <title>Lichen</title>
                <meta name="description" content="" />
                <link rel="icon" href="/favicon.ico" />
            </Head>

            <div  style={{ backgroundImage: !props.hideBanner ? `url(/icon/translate/${lang}/title.png)` : '',
            position: props.relative ? 'relative' : 'absolute'}}  className={styles.menu}>

                <div className={props.relative ?  styles.relative : styles.titleMenu}>
                    {props.title &&
                    <h1 style={{ color: "#ffffff"}}>{props.isNotTransaltion ? props.title : t(props.title)}</h1>
}
                </div>
            </div>
        </div>
    )
}
