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

type Props = {
    title?: string,
    color?: string
}

export default function TitleCard(props: Props) {
    const router = useRouter()
    const { t } = useTranslation('common')

    return (
        <div  className={styles.container}>
            <div style={{color: props.color}}  className={styles.textContainer}>
                {!props.color && <div style={{color: props.color}} className={styles.center}>.</div>}
            <div style={{color: props.color}} className={styles.containerText}>

                {!props.color && <span style={{color: props.color}} className={styles.center}>.</span>}
            <h2  style={{color: props.color}} className={styles.pointInterrogation}>{t(props.title)}</h2>
                {!props.color && <span style={{color: props.color}} className={styles.center}>.</span>}
            </div>
                {!props.color && <div style={{color: props.color}} className={styles.center}>.</div>}
            </div>
        </div>
    )
}