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

/**
 * Empty state estandarizado.
 *
 * Props:
 *   icon       — iconify id (default: mdi:inbox-outline)
 *   title      — string requerido
 *   description— string opcional
 *   ctaLabel   — label del botón primario
 *   onCta      — handler del CTA
 *   ctaIcon    — iconify id para el botón
 *   helpLabel  — texto del link de ayuda (ej: "¿Por qué no veo nada?")
 *   onHelp     — handler del link de ayuda (típicamente abre la ScreenGuia)
 *   compact    — bool, reduce padding
 */
export function EmptyState({
  icon = "mdi:inbox-outline",
  title,
  description,
  ctaLabel,
  onCta,
  ctaIcon = "mdi:plus",
  helpLabel = "¿Por qué no veo nada?",
  onHelp,
  compact = false,
}) {
  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        textAlign: "center",
        py: compact ? 3 : 6,
        px: 2,
        gap: 1,
      }}
      role="status"
      aria-live="polite"
    >
      <Icon icon={icon} width={compact ? 36 : 56} style={{ opacity: 0.5 }} />
      <Typography variant="subtitle1" fontWeight={600}>
        {title}
      </Typography>
      {description && (
        <Typography variant="body2" color="text.secondary" sx={{ maxWidth: 460 }}>
          {description}
        </Typography>
      )}
      <Box sx={{ display: "flex", gap: 1.5, mt: 1, flexWrap: "wrap", justifyContent: "center" }}>
        {ctaLabel && onCta && (
          <Button variant="contained" size="small" startIcon={<Icon icon={ctaIcon} />} onClick={onCta}>
            {ctaLabel}
          </Button>
        )}
        {onHelp && (
          <Link
            component="button"
            type="button"
            onClick={onHelp}
            underline="hover"
            sx={{ fontSize: "0.8125rem", alignSelf: "center" }}
          >
            {helpLabel}
          </Link>
        )}
      </Box>
    </Box>
  );
}