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

function ChoosePlace() {
    const navigate = useNavigate();
    const { translate } = useTranslations(ELocalesPlacement.CompatibilityV4);
    const [selectedAnswer, setSelectedAnswer] = useState<string | null>(null);
    const answers = [
        {
            id: "site",
            title: translate("/choose-place.button1"),
        },
        {
            id: "app",
            title: translate("/choose-place.button2", {
                br: <br />,
            }),
        }
    ]

    const handleAnswerClick = (answerId: string) => {
        setSelectedAnswer(answerId);
        if (answerId === "site") {
            return navigate(routes.client.compatibilityV4Email());
        }
        return navigate(routes.client.compatibilityV4CodeInstruction());
    }

    return (
        <div className={styles.container}>
            <Title className={styles.title} variant="h2">
                {translate("/choose-place.title", {
                    br: <br />,
                })}
            </Title>
            <Title className={styles.subtitle} variant="h3">
                {translate("/choose-place.subtitle", {
                    count: <span className={styles.count}>
                        {translate("/choose-place.subtitle_count")}
                    </span>,
                    br: <br />,
                })}
            </Title>
            <p className={styles.description1}>
                {translate("/choose-place.description1")}
            </p>
            <p className={styles.description2}>
                {translate("/choose-place.description2")}
            </p>

            {answers.map((answer) => (
                <Answer
                    key={answer.id}
                    answer={answer}
                    isSelected={selectedAnswer === answer.id}
                    onClick={() => handleAnswerClick(answer.id)}
                />
            ))}
        </div>
    )
}

export default ChoosePlace