import { Col, Row } from 'react-bootstrap'
import React, { useEffect, useState } 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';

export function Home() {

    const auth = useAuth();
    const [nombre, setNombre] = useState(null);

    useEffect(() => {
        let { nombre: empresa } = auth.getProfile();
        setNombre(empresa)
    }, [auth])


    return (
        <section >
            <div className="content-section">
                <div className="main">

                    <div id="start_title">
                        <h1>Bienvenido de nuevo {nombre}</h1>
                    </div>

                    <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>
    )

}