"use client";

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

const FooterTop = () => {
    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 `top` object, even if API shape changes
    const top = data?.top || footerData.top;

    // If for some reason `top` is still missing, avoid rendering to prevent runtime errors
    if (!top) {
        return null;
    }

    return (
        <footer
            className="footer-section fix bg-cover"
            style={top.bgImage ? { backgroundImage: `url('${top.bgImage}')` } : undefined}
        >
            <div className="container">
                <div className="footer-wrapper">
                    <div className="row">
                        <div className="col-xl-12">
                            <div className="footer-item">
                                <h2>
                                    <a href={top.phone.href}>{top.phone.display}</a>
                                </h2>
                                <h2 className="text">{top.address}</h2>
                                <div className="footer-list-item">
                                    <Link href={top.logo.href}>
                                        <img src={top.logo.src} alt={top.logo.alt} />
                                    </Link>
                                    <ul className="footer-list">
                                        {top.menuLinks.map((item, index) => (
                                            <li key={index}>
                                                <Link href={item.href}>{item.label}</Link>
                                            </li>
                                        ))}
                                    </ul>
                                    <div className="social-icon">
                                        {top.socialLinks.map((social, index) => (
                                            <a key={index} href={social.href}>
                                                <i className={social.icon}></i>
                                            </a>
                                        ))}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
    );
};

export default FooterTop;