import { useTranslations } from "@/hooks/translations"
import styles from "./styles.module.scss"
import { ELocalesPlacement } from "@/locales"
import Title from "@/components/Title"
import Button from "../../components/Button"
import { useNavigate } from "react-router-dom"

interface IAnswerExplanation {
    title?: string,
    text?: string
    handleBack?: () => void
    handleNext: () => void,
}

function AnswerExplanation({
    title,
    text,
    handleBack,
    handleNext
}: IAnswerExplanation) {
    const { translate } = useTranslations(ELocalesPlacement.CompatibilityV4)
    const navigate = useNavigate()

    const handleBackClick = () => {
        return handleBack ? handleBack() : navigate(-1)
    }

    const handleNextClick = () => {
        return handleNext()
    }

    return (
        <div className={styles.container}>
            {!!title?.length && <Title variant="h2" className={styles.title}>
                {title}
            </Title>}
            {!!text?.length && <p className={styles.text}>
                {text}
            </p>}
            <div className={styles["buttons-container"]}>
                <Button
                    className={`${styles.button} ${styles["back-button"]}`}
                    onClick={handleBackClick}
                >
                    {translate("back")}
                </Button>
                <Button
                    className={`${styles.button} ${styles["next-button"]}`}
                    onClick={handleNextClick}
                >
                    {translate("next")}
                </Button>
            </div>
        </div>
    )
}

export default AnswerExplanation