uldp.edu.vn/app/components/layout/Footer/FooterBottom.tsx

"use client";

import Link from "next/link";
import { useEffect, useState } from "react";
import { footerApi, FooterData } from "../../../../api/footerApi";
import footerData from "./footer.json";

const FooterBottom = () => {
    const [data, setData] = useState<FooterData>(footerData as FooterData);

    useEffect(() => {
        const loadFooterData = async () => {
            try {
                const apiData = await footerApi.getFooter();
                setData(apiData);
            } catch (error) {
                console.error("Failed to load footer data from API, using static data:", error);
                // Keep using static data as fallback
            }
        };

        loadFooterData();
    }, []);

    // Ensure we always have a valid `bottom` object, even if API shape changes
    const bottom = data?.bottom || footerData.bottom;

    // If bottom is still missing, avoid rendering to prevent runtime errors
    if (!bottom) {
        return null;
    }

    return (
        <div className="footer-bottom">
            <div className="container">
                <div className="footer-wrapper">
                    <p>
                        {bottom.copyright.text} <span>{bottom.copyright.brand}</span> {bottom.copyright.rights}
                    </p>
                    <ul className="bottom-list">
                        {bottom.menuLinks.map((item, index) => (
                            <li key={index}>
                                <Link href={item.href}>{item.label}</Link>
                            </li>
                        ))}
                    </ul>
                </div>
            </div>
        </div>
    );
};

export default FooterBottom;