import { FC } from "react";
import restartModalData from "@content/modals/restart_modal.json";
import "./RestartModal.scss";
import { Button } from "@/components/UI/Button/Button";
import { useTool } from "@/hooks/useTool";
import { useProgression } from "@/hooks/useProgression";
import { useContentWithTrad } from "@/hooks/useContentWithTrad";

interface RestartModalProps {
    onClose: () => void;
}

export const RestartModal: FC<RestartModalProps> = ({ onClose }) => {
    const content = useContentWithTrad(restartModalData);
    const { resetSelectedTool } = useTool();
    const { resetProgression } = useProgression();

    const handleClose = () => {
        onClose();
    };

    const handleRestart = () => {
        resetSelectedTool();
        resetProgression();
        handleClose();
    };

    return (
        <article className="restart-modal">
            <p className="restart-modal__text">
                {content.text_1}
                <br />
                {content.text_2}
            </p>
            <div className="restart-modal__buttons">
                <Button
                    label={content.cancel}
                    onClick={handleClose}
                    isTransparent
                />
                <Button label={content.redo} onClick={handleRestart} />
            </div>
        </article>
    );
};