import { Card } from '../Components/Card';
import { Col, Row } from 'react-bootstrap'
import React from 'react'

import PersonOutlineIcon from '@mui/icons-material/PersonOutline';
import VerifiedUserIcon from '@mui/icons-material/VerifiedUser';
import ListAltIcon from '@mui/icons-material/ListAlt';
import Actividades from '../Components/Actividades'
import Candidatos from '../Components/Candidatos'

export function Home() {
    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 title='CONTRASEÑAS' icon={VerifiedUserIcon}/>
                            </Col>
                            <Col md="4">
                                <Card title='EXPEDIENTES' icon={PersonOutlineIcon}/>
                            </Col>
                            <Col md="4">
                                <Card title='PUESTOS' icon={ListAltIcon}/>
                            </Col>
                        </Row>
                    </div>
                    <div className="historial_candidatos">
                        <Row>
                            <Col md="8">
                                <Candidatos/>
                            </Col>
                            <Col md="4">
                                <Actividades/>
                            </Col>
                        </Row>
                    </div>
                </div>
            </div>
        </section>
    )

}
