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 = {
        homeServices: []
      }
     componentDidMount() {
        axios.get(CONFIG.SERVER_URL+'getHomepage')
          .then(res => {
           this.setState({ homeServices: JSON.parse(res.data.data)});
          })
        }
    render() {
   return (
    <>
   <section className="home-section">
            <div className="container">
                <div className="heading-section aos-init aos-animate" data-aos="fade-up" data-aos-duration="500">
                    <h2 className="home-section-title">Our Solutions</h2>
                </div>
                {this.state.homeServices && this.state.homeServices.length > 0 &&
                <div className="home-section-content">
                    <div className="row">
                    {
                     this.state.homeServices.map(homeService =>(
                        <div className="col-md-6 aos-init aos-animate" data-aos="fade-up" data-aos-duration="500" key={homeService.id.toString()}>
                            <div className="abt-org-col">
                                <div className="abt-org-col-text">
                                    <div className="sbc-banner">
                                          <Link href={`services/${homeService.nickname}`}  as={`services/${homeService.nickname}`}>
                                            <img className="img-fluid img-rounded" alt={homeService.title} src={CONFIG.FILE_URL+"large/"+homeService.image}/>
                                         </Link>
                                          
                                    </div>
                                    <h3 className="h3Service">{homeService.title}
                                    </h3>
                                    <div className="p-text service">{homeService.description.slice(0, 250) + (homeService.description.length > 250 ? "..." : "")}</div>
                                    <div className="res-circle">
                                    <div className="circle-icon">
                                    <Link href={'/services/'+homeService.nickname}><a><i className="fas fa-arrow-right"></i></a></Link>
                                    <Link href={'/services/'+homeService.nickname}><a className="circle-txt"> <p>Read more</p></a></Link>
                                        </div>

                                    </div>

                                </div>
                            </div>
                        </div>
                        ))}
                        
                    </div>
                </div>
                 } 
            </div>
            <div className="vl"></div>
        </section>
    </>
    )
  }
}
