"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import headerData from "./header.json";

interface HeaderData {
    top: {
        phone: string;
        email: string;
        location: string;
        socialLinks: Array<{
            platform: string;
            url: string;
            icon: string;
        }>;
        languages: Array<{
            name: string;
            value: string;
        }>;
    } | null;
}

const HeaderTop: React.FC<{ data: HeaderData['top'] }> = ({ data }) => {
    // Use passed data or fallback to local JSON if data is null (though parent should handle fetching)
    // If data is null (initial load), we can use headerData fallback or render nothing/skeleton
    
    const displayData = data || headerData.top;
    const { phone, email, location, socialLinks, languages } = displayData;

    return (
        <div className="header-top-section">
            <div className="container-fluid">
                <div className="header-top-wrapper">
                    <div className="header-left">
                        <ul className="list d-flex align-items-center mb-0 p-0 list-unstyled">
                            <li className="style-2 d-flex align-items-center me-4">
                                <span className="me-2">Help Line</span>
                                <i className="fa-solid fa-phone me-2"></i>
                                <a href={`tel:${phone.replace(/\s/g, "")}`}>{phone}</a>
                            </li>

                            <li className="d-flex align-items-center me-4">
                                <i className="fa-solid fa-location-dot me-2"></i>
                                {location}
                            </li>

                            <li className="d-flex align-items-center">
                                <i className="fa-solid fa-envelope me-2"></i>
                                <a href={`mailto:${email}`}>{email}</a>
                            </li>
                        </ul>
                    </div>

                    <div className="header-right">
                        <div className="flag-wrap">
                            <div className="flag">
                                <i className="fa-solid fa-globe"></i>
                            </div>
                            <div className="nice-select" tabIndex={0}>
                                <span className="current">{languages[0]?.name || "English"}</span>
                                <ul className="list">
                                    {languages.map((lang, index) => (
                                        <li
                                            key={index}
                                            data-value={lang.value}
                                            className={`option ${index === 0 ? "selected focus" : ""}`}
                                        >
                                            {lang.name}
                                        </li>
                                    ))}
                                </ul>
                            </div>
                        </div>
                        <div className="social-item">
                            {socialLinks.map((social, index) => (
                                <a key={index} href={social.url} target="_blank" rel="noopener noreferrer">
                                    <i className={social.icon}></i>
                                </a>
                            ))}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default HeaderTop;