import Link from 'next/link';
import headerData from './header.json';

const HeaderTop = () => {
    const { phone, email, location, socialLinks, languages } = headerData.top;

    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;