import React from 'react';
import { Typography, Container, Box } from '@mui/material';
import logo from '../assets/eldia.png';

const HomePage: React.FC = () => {
  return (
    <Container>
      <Typography variant="h4" component="h1" gutterBottom>
        Bienvenido al Sistema
      </Typography>
      <Typography variant="body1">
        Seleccione una opción del menú principal para comenzar.
      </Typography>
      <Box
          component="div"
          sx={{
            marginTop: 20,
            width: '100%',        // ocupa todo el ancho disponible
            maxWidth: 429,        // pero no más de 429px
            mx: 'auto',           // margin-left/right auto para centrar
          }}
        >
          <img
            src={logo}
            alt="Logo"
            style={{ width: '100%', height: 'auto', display: 'block' }}
          />
        </Box>
    </Container>
  );
};

export default HomePage;