import React, { useState } from "react";
import Link from "next/link";
import axios from 'axios';
import CONFIG from "../../../../config.json";
export default class Services extends React.Component {
    state = {
        services: []
      }
     componentDidMount() {
        axios.get(CONFIG.SERVER_URL+'getSidebar')
          .then(res => {
              console.log("====DATA====",JSON.parse(res.data.data))
           this.setState({ services: JSON.parse(res.data.data)});
          })
        }
    render() {
   return (
      <>
      <button className="dropdown-btn">Our Solutions<i className="fas fa-chevron-down"></i></button>
      <div className="dropdown-container">
            {this.state.services.map(function (mainservice, i) {
                 return (
                      <div key={mainservice.id.toString()}>
                           <button className="dropdown-btn">Business Mobility<i className="fas fa-chevron-down"></i></button>
                            <div className="dropdown-container dropdown-container-bg">
                            <Link href="/about-us">Travel</Link>
                            <Link href="/about-us">Business Space</Link>
                            <Link href="/about-us">Interior Design</Link>
                            <Link href="/about-us">Recruitment</Link>
                            <Link href="/about-us">Sanitization</Link>
                            </div>
                     </div>
            
            )   
              
                })}
            </div>
            </>
  )
}
}