import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faBookOpen} from "@fortawesome/free-solid-svg-icons";
import React from "react";
import {useTranslations} from "next-intl";

export default function NoBookHome() {
    const t = useTranslations();
    
    return (
        <div className="flex items-center justify-center h-full p-8 text-center">
            <div
                className="max-w-md bg-tertiary/90 backdrop-blur-sm p-10 rounded-2xl shadow-2xl border border-secondary/50">
                <FontAwesomeIcon icon={faBookOpen} className={"text-primary w-20 h-20 mb-6 animate-pulse"}/>
                <h3 className="text-2xl font-['ADLaM_Display'] text-text-primary mb-4">{t("noBookHome.title")}</h3>
                <p className="text-muted mb-6 text-lg leading-relaxed">
                    {t("noBookHome.description")}
                </p>
                <div
                    className="flex items-center justify-center gap-3 text-sm text-muted bg-secondary/30 p-4 rounded-xl border border-secondary/40">
                    <FontAwesomeIcon icon={faBookOpen} className="text-primary w-5 h-5"/>
                    <span>{t("noBookHome.hint")}</span>
                </div>
            </div>
        </div>
    )
}