"use client";

import { useTranslations } from "next-intl";
import { ArrowLeft } from "lucide-react";
import { Button } from "@/components/ui/button";
import { useRouter } from "@/i18n/navigation";
import { useEffect, useState } from "react";
import { USER_TOKEN_CL } from "@/utils/data/user-client";

export function HeroAction() {
    const t = useTranslations();
    const router = useRouter();
    const [isLoggedIn, setIsLoggedIn] = useState<string | undefined>(undefined);

    useEffect(() => {
        setIsLoggedIn(USER_TOKEN_CL());
    }, []);

    const handleActionClick = () => {
        if (isLoggedIn) {
            router.push('/programs');
        } else {
            router.push('/login');
        }
    };

    return (
        <div className="flex flex-col items-center gap-6">
            <div className="h-1.5 w-32 bg-yellow-400 rounded-full shadow-[0_0_20px_rgba(250,204,21,0.4)]" />
            <Button 
                onClick={handleActionClick}
                className="bg-primary-tw-600 hover:bg-primary-tw-700 text-white rounded-full px-10 py-7 text-lg shadow-xl shadow-primary-tw-200 pointer-events-auto transition-transform hover:scale-105 active:scale-95 group"
            >
                {t("custom.get-started")}
                <ArrowLeft className="ms-2 size-5 transition-transform group-hover:translate-x-1 rtl:group-hover:-translate-x-1" />
            </Button>
        </div>
    );
}