import { Box, Button, Container, Stack, Typography } from "@mui/material";
import { Icon } from "@iconify/react";
import { Link } from "react-router-dom";
import PromesasListPage from "../../views/cobranzas/PromesasListPage";

/**
 * Wrapper de PromesasListPage que aplica el layout estándar de Cartera
 * Inteligente: header con "Volver", título, padding lateral. Reutiliza el
 * componente original sin duplicar código de lista/filtros/acciones.
 */
export default function PromesasCarteraPage() {
  return (
    <Container maxWidth="xl" sx={{ py: 3 }}>
      <Box mb={2}>
        <Button
          component={Link}
          to="/cartera-inteligente"
          startIcon={<Icon icon="lucide:arrow-left" width={18} />}
          size="small"
          variant="text"
        >
          Volver
        </Button>
        <Stack direction="row" alignItems="center" spacing={1} mt={1}>
          <Icon icon="lucide:handshake" width={28} />
          <Typography variant="h5" fontWeight={700}>
            Promesas de pago
          </Typography>
        </Stack>
        <Typography variant="body2" color="text.secondary">
          Compromisos del cliente con recordatorio D-1 automático.
        </Typography>
      </Box>
      <PromesasListPage />
    </Container>
  );
}