/**
 * ErrorGeneral: pantalla de error general. Título, icono, subtítulo, mensaje y botón Reintentar.
 * Reutiliza FONT_FAMILY_SANS, Icon (FaceFrownIcon, ArrowPathIcon) y tokens de color.
 */
import { Icon } from '../../Atoms/Icon/Icon';
import { FONT_FAMILY_SANS } from '../../../designTokens';

const COLOR_TITULO = 'var(--color-main-800, #29474C)';
const COLOR_MENSAJE = 'var(--color-grey-700, #474747)';
const COLOR_BOTON_BORDER = 'var(--color-main-700, #38656D)';
const COLOR_ICONO_ERROR = '#6D3856';

export const ErrorGeneral = ({
  /** Título principal. Parametrizable desde el proyecto consumidor (ej. i18n). */
  title = '',
  /** Subtítulo. Parametrizable desde el proyecto consumidor. */
  subtitle = '',
  /** Mensaje de detalle. Parametrizable desde el proyecto consumidor. */
  message = '',
  /** Texto del botón de reintentar. Parametrizable desde el proyecto consumidor. */
  reintentarText = '',
  /** Callback al hacer clic en Reintentar; el consumidor define la acción (recargar, volver, etc.) */
  onReintentar,
  className = '',
  style = {},
  ...props
}) => (
  <div
    className={`anima-error-general ${className}`}
    style={{
      width: '100%',
      maxWidth: 'min(100%, 1088px)',
      minHeight: 0,
      paddingTop: 60,
      paddingBottom: 60,
      paddingLeft: 24,
      paddingRight: 24,
      boxSizing: 'border-box',
      borderRadius: 16,
      opacity: 1,
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'center',
      marginLeft: 'auto',
      marginRight: 'auto',
      ...style,
    }}
    {...props}
  >
    <div
      style={{
        width: '100%',
        maxWidth: 'min(100%, 1088px)',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        gap: 24,
        opacity: 1,
      }}
    >
      <div
        style={{
          width: '100%',
          maxWidth: 'min(100%, 640px)',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          gap: 4,
          opacity: 1,
        }}
      >
        {/* Título */}
        <div
          style={{
            width: '100%',
            maxWidth: 'min(100%, 640px)',
            fontFamily: FONT_FAMILY_SANS,
            fontWeight: 400,
            fontStyle: 'normal',
            fontSize: '32px',
            lineHeight: '48px',
            letterSpacing: 0,
            textAlign: 'center',
            color: COLOR_TITULO,
            margin: 0,
          }}
        >
          {title}
        </div>

        {/* Icono de error */}
        <div
          style={{
            width: 120,
            height: 120,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            position: 'relative',
            opacity: 1,
            boxSizing: 'border-box',
          }}
        >
          <Icon
            name="FaceFrownIcon"
            variant="24-outline"
            size={120}
            style={{ color: COLOR_ICONO_ERROR, flexShrink: 0 }}
          />
        </div>

        {/* Subtítulo (si se pasa) */}
        {subtitle ? (
          <div
            style={{
              width: '100%',
              maxWidth: 'min(100%, 640px)',
              fontFamily: FONT_FAMILY_SANS,
              fontWeight: 400,
              fontStyle: 'normal',
              fontSize: '32px',
              lineHeight: '48px',
              letterSpacing: 0,
              textAlign: 'center',
              color: COLOR_TITULO,
              margin: 0,
            }}
          >
            {subtitle}
          </div>
        ) : null}

        {/* Mensaje de error */}
        <div
          style={{
            width: '100%',
            maxWidth: 'min(100%, 640px)',
            fontFamily: FONT_FAMILY_SANS,
            fontWeight: 400,
            fontStyle: 'normal',
            fontSize: '16px',
            lineHeight: '24px',
            letterSpacing: 0,
            textAlign: 'center',
            color: COLOR_MENSAJE,
            margin: 0,
          }}
        >
          {message}
        </div>
      </div>

      {/* Botón Reintentar (fuera del bloque de contenido) */}
      {onReintentar != null && (
        <button
          type="button"
          onClick={onReintentar}
          aria-label={reintentarText}
          style={{
            paddingTop: 8,
            paddingRight: 12,
            paddingBottom: 8,
            paddingLeft: 12,
            gap: 8,
            height: 37,
            minHeight: 37,
            boxSizing: 'border-box',
            borderRadius: 8,
            border: `1px solid ${COLOR_BOTON_BORDER}`,
            background: 'transparent',
            display: 'inline-flex',
            alignItems: 'center',
            justifyContent: 'center',
            cursor: 'pointer',
            fontFamily: FONT_FAMILY_SANS,
            fontWeight: 500,
            fontStyle: 'normal',
            fontSize: '14px',
            lineHeight: '21px',
            letterSpacing: '0.01em',
            color: COLOR_BOTON_BORDER,
          }}
        >
          <Icon
            name="ArrowPathIcon"
            variant="24-outline"
            size={20}
            style={{ flexShrink: 0, color: COLOR_BOTON_BORDER }}
          />
          <span style={{ marginLeft: 8 }}>{reintentarText}</span>
        </button>
      )}
    </div>
  </div>
);

export default ErrorGeneral;
