import React, { useEffect, useState } from 'react'
import axios from 'axios';
import { Button } from 'antd';
import baseUrl from '../../../array/base/config';

/**
 *
 * Represents a page for company bonus information
 * @module Bonus
 * @returns {JSX.Element} Returns a JSS element that displays company bonus information
 */
const Company = () => {
    /**
     * React state for storing company information
     * @name company
     * @type {object}
     * @default {object}
     * @memberof module:Bonus
     */
    const [company, setCompany] = useState({})
    /**
     * React state for storing loading status
     * @name isLoading
     *  @type {boolean}
     *  @default {true}
     *  @memberof module:Bonus
     */
    const [isLoading, setIsLoading] = useState(true);


    useEffect(() => {
        apicall()

    }, []);
    /**
     * Function for getting company bonus  information
     * @name apicall
     * @function
     * @memberof module:Bonus
     * @inner
     */
    const apicall = () => {
        const id = 1;
        const detail = localStorage.getItem('token')
        axios({
            method: 'get',
            url: `${baseUrl}/api/bonus/${id}/`,
            headers: {
                "Authorization":
                    `Token ${detail}`,
            },
        }).then(res => {

            setCompany(res?.data?.data);
            setIsLoading(false);
        })
            .catch(err => console.log(err));
    }


    if (isLoading) {
        return <p>Loading...</p>;
    }
    return (
        <div className='bonus_in'>
            <h1>Company Information</h1>
            <div style={{ border: "0.5px solid black" }} />
            <h2>{company.name}</h2>
            <h2>{company.industry}</h2>
            <img src={company.logo} />
            <h2>{company.registration_number}</h2>
            <h2>{company.description}</h2>
        </div >
    )
}

export default Company