import { useAuth } from '../context/AuthContext';

export default function HomePage() {
  const { user } = useAuth();

  return (
    <div className="card">
      <h1 className="page-title">Menú principal</h1>
      <p>
        Bienvenido, <strong>{user?.username}</strong>. Utilice la barra superior para acceder a cada planilla.
      </p>
      <ul style={{ color: 'var(--muted)', lineHeight: 1.8 }}>
        <li>Planillas de ingresos: Ventas, Servicios y Alquileres</li>
        <li>Planillas de egresos: Gastos Diarios y Gastos Fijos</li>
        <li>Planilla de Personal y Reportes consolidados</li>
        {user?.isAdmin && <li>Panel de Administración para gestionar usuarios y permisos</li>}
      </ul>
      <p style={{ fontSize: '0.85rem', color: 'var(--muted)', marginTop: '1.5rem' }}>
        Los datos se guardan automáticamente en el servidor al editar y al cambiar de pestaña. Use el botón <strong>+</strong> para agregar filas. Asegúrese de tener el backend en ejecución (puerto 4000).
      </p>
    </div>
  );
}