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

function PlanCancelledPage() {
    const navigate = useNavigate();
    const { translate } = useTranslations(ELocalesPlacement.RetainingFunnel);

    const handleButtonClick = () => {
        navigate(routes.client.home());
    }

    return (
        <div className={styles.container}>
            <Title variant="h1" className={styles.title}>
                {translate("/plan-cancelled.title")}
            </Title>
            <span className={styles.icon}>
                {translate("/plan-cancelled.icon")}
            </span>

            <Button className={styles.button} active={true} onClick={handleButtonClick}>
                {translate("/plan-cancelled.button")}
            </Button>
            <p className={styles.description}>
                {translate("/plan-cancelled.description")}
            </p>
        </div>
    )
}

export default PlanCancelledPage