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 SubscriptionStoppedPage() {
    const { translate } = useTranslations(ELocalesPlacement.RetainingFunnel);
    const navigate = useNavigate();

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


    return (
        <div className={styles.container}>
            <Title variant="h1" className={styles.title}>
                {translate("/subscription-stopped.title")}
            </Title>
            <span className={styles.icon}>
                {translate("/subscription-stopped.icon")}
            </span>
            <Button className={styles.button} active={true} onClick={handleButtonClick}>
                {translate("/subscription-stopped.button")}
            </Button>
        </div>
    )
}

export default SubscriptionStoppedPage