import { useTranslations } from '@/hooks/translations'
import Review from '../../components/Review'
import styles from './styles.module.scss'
import { ELocalesPlacement } from '@/locales'
import Button from '../../components/Button'
import { useNavigate } from 'react-router-dom'
import routes from '@/routes'
import { useSelector } from 'react-redux'
import { selectors } from '@/store'

function ReviewPage() {
    const navigate = useNavigate()
    const { translate } = useTranslations(ELocalesPlacement.CompatibilityV4)
    const { relationshipStatus } = useSelector(selectors.selectCompatibilityV4Answers);
    const isSingle = relationshipStatus === "single";


    const handleNext = () => {
        if (isSingle) return navigate(routes.client.compatibilityV4DateEvent());
        navigate(routes.client.compatibilityV4GenderPartner());
    };

    return (
        <div className={styles.container}>
            <Review
                username={translate(`/review${isSingle ? '.single' : ''}.username`)}
                // avatar={translate('/review.avatar')}
                text={translate(`/review${isSingle ? '.single' : ''}.text`)}
                date={translate(`/review${isSingle ? '.single' : ''}.date`)}
            />
            <Button className={styles.button} onClick={handleNext}>
                {translate("next")}
            </Button>
        </div>
    )
}

export default ReviewPage