import { Icon } from "@iconify/react";
import { Box, Container, IconButton, Stack, Tooltip, Typography } from "@mui/material";
import { useNavigate } from "react-router-dom";
import { LibroRetencionesPanel } from "../../components/organismos/RecibosMulti/LibroRetencionesPanel";

export function LibroRetencionesPage() {
  const navigate = useNavigate();
  return (
    <Container maxWidth="xl" sx={{ py: 3 }}>
      <Stack direction="row" alignItems="center" spacing={1.5} mb={2}>
        <Tooltip title="Volver a Reportes">
          <IconButton onClick={() => navigate("/reportes")} size="small">
            <Icon icon="lucide:arrow-left" width={20} />
          </IconButton>
        </Tooltip>
        <Box>
          <Typography variant="h5" fontWeight={700}>
            Libro de Retenciones
          </Typography>
          <Typography variant="body2" color="text.secondary">
            Listado fiscal de retenciones emitidas y aplicadas en recibos.
          </Typography>
        </Box>
      </Stack>
      <LibroRetencionesPanel />
    </Container>
  );
}

export default LibroRetencionesPage;