import { Col, Row } from 'react-bootstrap'
import React, { } from 'react'

import { PersonOutline, VerifiedUser, ListAlt  } from '@mui/icons-material/'

import Actividades from '../Components/Home/Actividades'
import Candidatos from '../Components/Home/Candidatos'
import { Card } from '../Components/Card';

// import useAuth from '../Auth/useAuth';
// import { Service } from '../Utils/HTTP.js';

export function Home() {

    /*
    let auth = useAuth();
    useEffect(() => {
        let token = auth.getToken();
        let myService = new Service("/persona/view");
        myService.get(token)
        .then( ({data}) => {
            console.log('Home Response :: ', data)
        }).catch(e => {
            console.log('Error Response :: ', e)
        })
    } ,[])
*/

    return (
        <section >
            <div className="content-section">
                <div className="main">
                    <h1>Bienvenido de nuevo Grupo DIT</h1>
                    <div className="panel_options">
                        <Row>
                            <Col md="4">
                                <Card quantity={120} to='/dashboard/contrasenas'  title='CONTRASEÑAS' icon={VerifiedUser}/>
                            </Col>
                            <Col md="4">
                                <Card quantity={504} to='/dashboard/expedientes' title='EXPEDIENTES' icon={PersonOutline}/>
                            </Col>
                            <Col md="4">
                                <Card quantity={343} to="/dashboard/puestos" title='PUESTOS' icon={ListAlt}/>
                            </Col>
                        </Row>
                    </div>
                    <div className="historial_candidatos">
                        <Row>
                            <Col md="8">
                                <Candidatos/>
                            </Col>
                            <Col md="4">
                                <Actividades/>
                            </Col>
                        </Row>
                    </div>
                </div>
            </div>
        </section>
    )

}
