import { Icon } from "@iconify/react";
import { Box, Button, Divider, Link, Typography } from "@mui/material";

export function RRHHEmptyState({
  icon = "mdi:inbox-outline",
  titulo,
  descripcion,
  ctaLabel,
  onCta,
  ctaSecLabel,
  onCtaSec,
  guiaSeccion,
  onVerGuia,
}) {
  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        py: 6,
        px: 2,
        textAlign: "center",
        gap: 1.5,
      }}
    >
      <Icon icon={icon} width={48} style={{ color: "#94a3b8" }} />
      <Typography variant="subtitle1" fontWeight={600} color="text.secondary">
        {titulo}
      </Typography>
      {descripcion && (
        <Typography variant="body2" color="text.disabled" sx={{ maxWidth: 420, lineHeight: 1.6 }}>
          {descripcion}
        </Typography>
      )}
      <Box sx={{ display: "flex", gap: 1, flexWrap: "wrap", justifyContent: "center", mt: 1 }}>
        {ctaLabel && onCta && (
          <Button variant="contained" size="small" onClick={onCta}>
            {ctaLabel}
          </Button>
        )}
        {ctaSecLabel && onCtaSec && (
          <Button variant="outlined" size="small" onClick={onCtaSec}>
            {ctaSecLabel}
          </Button>
        )}
        {(guiaSeccion || onVerGuia) && (
          <Button
            variant="text"
            size="small"
            startIcon={<Icon icon="mdi:information-outline" width={16} />}
            onClick={onVerGuia}
          >
            Ver guía
          </Button>
        )}
      </Box>
      {(guiaSeccion || onVerGuia) && (
        <>
          <Divider sx={{ width: "100%", maxWidth: 300, my: 0.5 }} />
          <Link
            component="button"
            variant="caption"
            color="text.disabled"
            onClick={onVerGuia}
            underline="hover"
          >
            ¿Por qué no veo nada?
          </Link>
        </>
      )}
    </Box>
  );
}