import React from 'react';
import axios from 'axios';
import { useState,useEffect } from "react";
import { useParams,Link, useNavigate} from 'react-router-dom';
import { Helmet } from 'react-helmet';

export default function Company(props){
    
    const [inputField , setInputField] = useState({addr1:'',addr2:'',phone1:'',phone2:''});

    
    
    const fetchData =()=>{
        fetch('https://capitalsgrowth.in/Rest/company_profile_api')
        .then((response) =>{
            return response.json();
        }).then((data)=>{
            console.log(data)
            setInputField({ ...inputField,addr1: data.head_office,addr2:data.branch_office,
                phone1:data.phone1,phone2:data.phone2})
        });
       
    }
    useEffect(()=>{
        fetchData();
    },[])

        return (     
            <div>
            <Helmet>
            <title>MCX Trading</title>
            <link rel="stylesheet" href="/site/css/style.css"/>
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/> 
            <script src="/site/js/lib/bootstrap.bundle.min.js"></script>
            <script src="/site/js/plugins/splide/splide.min.js"></script>
            
            </Helmet>
            
            <div className="appHeader no-border">
        <div className="left">
            <Link to="/settings" className="headerButton goBack">
                <i className="fa fa-arrow-left"></i> 
            </Link>
        </div>
        <div className="pageTitle">About Company</div>
        <div className="right"> </div>
    </div>
    <div id="appCapsule">
    
        <div className="section">
            <div className=" pt-1 pb-1">
                    <h2>FinStock Capitals</h2>  
                    <hr/>
                    <h3 className='text-primary'>Head Office</h3>
                    <p>{inputField.addr1}</p>
                    <hr/>
                    <h3 className='text-primary'>Branch Office</h3>
                    <p>{inputField.addr2}</p>
                    <hr/>
                    <h3 className='text-primary'>Email</h3>
                    <p>info@capitalsgrowth.in</p>
                    <hr/>
                    <h3 className='text-primary'>Phone</h3>
                    <p>{inputField.phone1}</p>
                    <p>{inputField.phone2}</p>
                    <hr/>
            
        </div>
        
            </div>


    </div>
            </div>
        )
    }



