import { Icon } from "@iconify/react";
import { Box, Button, Paper, Typography } from "@mui/material";
import { useNavigate } from "react-router-dom";
import styled from "styled-components";
import { usePermission } from "../hooks/usePermission";
import { SolicitudesCreditoTab } from "../components/ventas/SolicitudesCreditoTab";

export function SolicitudesCredito() {
  const navigate = useNavigate();
  const { can: canVentas } = usePermission("VENTAS");
  const canCreate = canVentas("VEN_SOL_SOLICITUD_CREAR");

  return (
    <Container>
      <Paper sx={{ mb: 2, p: 2 }}>
        <Box
          sx={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
          }}
        >
          <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
            <Icon icon="mdi:file-document-check" width={24} />
            <Typography variant="h5" fontWeight={600}>
              Solicitudes de Crédito
            </Typography>
          </Box>
          {canCreate && (
            <Button
              variant="contained"
              size="small"
              startIcon={<Icon icon="mdi:plus" width={18} />}
              onClick={() => navigate("/solicitudes-credito/nueva")}
            >
              Nueva Solicitud
            </Button>
          )}
        </Box>
      </Paper>

      <Paper
        sx={{
          overflowX: "hidden",
          p: { xs: 1, sm: 2 },
        }}
      >
        <SolicitudesCreditoTab />
      </Paper>
    </Container>
  );
}

const Container = styled.div`
  /* min-height (no height fija) → crece con el contenido; único scroll = el del body. */
  min-height: calc(100vh - 50px);
  margin-top: 50px;
  padding: 15px;
  overflow-x: hidden;
  max-width: 100vw;
  box-sizing: border-box;
`;