import { useNavigate } from "react-router-dom";
import { ROUTES } from "../../config/routes";

interface PostActionOverlayProps {
    revealState: "SEALED" | "REVEALED" | "BURNING" | "BURNED";
}

export function PostActionOverlay({ revealState }: PostActionOverlayProps) {
    const navigate = useNavigate();
    return (
        <div
            className={`flex flex-col items-center justify-center min-h-screen bg-base-100 ${revealState === "BURNED" ? "opacity-100" : "opacity-0"} transition-all delay-1000 duration-1000`}
        >
            <h1
                className={`text-6xl ${revealState === "BURNED" ? "opacity-100" : "opacity-0"} lg:text-9xl italic font-extralight text-base-content animate-[pulse_3s_ease-in-out_3]`}
            >
                It is done
            </h1>
            <div
                className={`text-xl ${revealState === "BURNED" ? "opacity-100" : "opacity-0"} lg:text-4xl text-center font-extralight text-base-content font-display mt-8 delay-3000 transition-all duration-2000 tracking-wide`}
            >
                <p className="w-full">
                    May your <span className="italic text-primary">soul</span> find
                    solace,
                    <br />
                    just like your <span className="text-accent italic">unsaid</span>&nbsp;
                    words did.
                </p>
                <div className="divider mx-auto w-24 text-center"></div>
                <button
                    type="button"
                    className="btn btn-ghost text-sm text-neutral-content/60 font-sans"
                    onClick={() => navigate(ROUTES.DRAWER)}
                >
                    Turn the page
                </button>
            </div>
        </div>
    );
}