"use client";

import { useRouterNavigation } from "@/hooks/useRouterNavigation";
import { useTranslation } from "@/hooks/useTranslation";
import { firstWordCapital } from "@/utils/text";
import Image from "next/image";
import Button from "../ui/Button";

export default function OnboardingPage() {
    const { navigate } = useRouterNavigation();
    const { t } = useTranslation();

    return (
        <div className="flex flex-col items-center gap-6">
            <div className="w-full max-w-xl flex flex-col items-center p-10 gap-5">
                <Image
                    src="/assets/Main/Logo/logo kutubuku.png"
                    alt="Logo Kutubuku Kita"
                    width={300}
                    height={150}
                    priority
                />

                <h1 className="text-2xl text-dark-500 md:text-3xl font-bold text-center">
                    {firstWordCapital('Hai, Kak')}! {firstWordCapital(t('welcome to at KutuBuku'))}
                </h1>

                <div className="flex flex-col items-center gap-2">
                    <h3 className="text-sm md:text-base text-dark-300 text-center">
                        {firstWordCapital(t('home for readers and writers to make money'))}
                    </h3>
                    <h4 className="text-xs md:text-sm text-dark-300 text-center">
                        #dikit2jadibukit
                    </h4>
                </div>

                <div className="w-full max-w-xs">
                    <Button
                        text={t("next")}
                        onClick={() => navigate("onboarding/filter")}
                        theme="primary"
                    />
                </div>
            </div>
        </div>
    );
}