import React from 'react';
import Logo from '../../assets/float-ev/images/float-travel-app-logo.png';
import Navigation from '../Navigation';
import getConfig from './../../Config/config'

function HeaderService({ action }) {
    var site = getConfig()[0];
    return (
        <>
            <header className="appie-header-area appie-header-page-area appie-sticky">
                <div className="container">
                    <div className="header-nav-box header-nav-box-3 header-nav-box-inner-page">
                        <div className="row align-items-center">
                            <div className="col-lg-2 col-md-4 col-sm-5 col-6 order-1 order-sm-1">
                                <div className="appie-logo-box">
                                    <a href="/">
                                    <img src={Logo} alt="Float" />
                                    </a>
                                </div>
                            </div>
                            <div className="col-lg-6 col-md-1 col-sm-1 order-3 order-sm-2">
                                <div className="appie-header-main-menu">
                                    <Navigation />
                                </div>
                            </div>
                            <div className="col-lg-4  col-md-7 col-sm-6 col-6 order-2 order-sm-3">
                            <div className="appie-btn-box text-right">
                            <div className="footer-about-widget">
                            <div className="  social mt-30">
                            <ul>
                                        <li><a href={site.facebook_link}>
                                                <i className="fab fa-facebook-f" />
                                            </a></li>
                                            
                                       
                                            <li><a href={site.twitter_link}>
                                                <i className="fab fa-twitter" />
                                            </a></li>
                                            
                                        
                                            <li><a href={site.linked_link}>
                                                <i className="fab fa-linkedin-in" />
                                            </a></li>
                                            
                                        
                                            <li><a href={site.instagram_link}>
                                                <i className="fab fa-instagram" />
                                            </a></li>
                                            
                                        
                                    </ul>
                                
                                <div
                                    onClick={(e) => action(e)}
                                    className="toggle-btn ml-30 canvas_open d-lg-none d-block"
                                >
                                    <i className="fa fa-bars" />
                                </div>
                                </div>
                            </div>
                            </div>
                            </div>
                        </div>
                    </div>
                </div>
            </header>
        </>
    );
}

export default HeaderService;
