import React, { useState } from 'react';
import LogoLD from '../ui/LogoLD.jsx';
import {IoArrowBack} from 'react-icons/io5';
import ServiceSnippet from '../ui/ServiceSnippet.jsx';
import Serv1 from '../assets/serv-1.jpg';
import Serv2 from '../assets/serv-2.jpg';
import Serv3 from '../assets/serv-3.jpg';
import Serv4 from '../assets/serv-4.jpg';
import Serv5 from '../assets/serv-5.jpg';  
import Serv6 from '../assets/serv-6.jpg';
import Serv7 from '../assets/serv-7.jpg';
import Serv8 from '../assets/serv-8.jpg';
import Serv9 from '../assets/serv-9.jpg';
import LoginScreen from '../ui/LoginScreen.jsx';
import LDFasH from '../assets/ldfas_h.png';

const HomePage = () => {

	const [permisos, setPermisos] = useState([]);

	const srv = [
		{
			id: 1,
			name: 'Contabilidad',
			color: '#D73220',
			url: 'https://conta.ld.cr/',
			img: Serv1
		},
		{
			id: 2,
			name: 'Cuentas por Cobrar',
			color: '#F4B647',
			url: 'https://cpc.ld.cr/',
			img: Serv2
		},
		{
			id: 3,
			name: 'Cuentas por Pagar',
			color: '#C98204',
			url: 'https://cpp.ld.cr/',
			img: Serv3
		},
		{
			id: 4,
			name: 'Caja y Bancos',
			color: '#0D4375',
			url: 'https://caja.ld.cr/',
			img: Serv4
		},
		{
			id: 5,
			name: 'Planillas',
			color: '#10A599',
			url: 'https://planillas.ld.cr/',
			img: Serv5
		},
		{
			id: 6,
			name: 'Recursos Humanos',
			color: '#5D8C96',
			url: 'https://rrhh.ld.cr/',
			img: Serv6
		},
		{
			id: 7,
			name: 'Autogestión',
			color: '#006F95',
			url: 'https://autogestion.ld.cr/',
			img: Serv7
		},
		{
			id: 8,
			name: 'Activos Fijos',
			color: '#BE7F55',
			url: 'https://af.ld.cr/',
			img: Serv8
		},
		{
			id: 9,
			name: 'Tipo de Cambio',
			color: '#94A24B',
			url: 'https://tc.ld.cr/',
			img: Serv9
		}
	];

	return <>
		<div className='c-flex'>
			<div className='container'>
				<div className='row'>
					<div className='col-6 col-sm-3 p-4'>
						<img src={LDFasH} alt='LDFAS' className='img-fluid' />
					</div>
					<div className='col-6 col-sm-3 offset-sm-6 p-4'>
						<LogoLD fill='#fff' />
					</div>
				</div>
			</div>
			<div className='services'>
			{
				srv.map( (item, index) => <ServiceSnippet key={index} item={item} auth={permisos[item.id-1]} /> )
			}
			</div>
			<div className='container'>
				<div className='row'>
					<div className='col text-end'>
						<button className='btn btn-light' onClick={ () => setPermisos([]) }>Salir <IoArrowBack className='ms-4' /></button>
					</div>
				</div>
			</div>
		</div>
		{ permisos.length === 0 && <LoginScreen setPermisos={setPermisos} /> }
	</>
}

export default HomePage