import { Icon } from '../../Atoms/Icon/Icon';
import { FONT_FAMILY_MONO } from '../../../designTokens';

export const VISTA_DATOS_DETALLE_ALERT_COLOR = 'var(--color-status-warning, #CC4908)';

/** Banner de advertencia en columna Detalles (spec diseño). */
export const VISTA_DATOS_DETALLE_ALERT_STYLE = {
  width: '100%',
  maxWidth: 445,
  height: 48,
  borderRadius: 8,
  borderWidth: 1,
  borderStyle: 'solid',
  borderColor: VISTA_DATOS_DETALLE_ALERT_COLOR,
  gap: 12,
  opacity: 1,
  paddingTop: 12,
  paddingRight: 16,
  paddingBottom: 12,
  paddingLeft: 16,
  boxSizing: 'border-box',
  display: 'flex',
  alignItems: 'center',
  flex: '0 0 auto',
  backgroundColor: 'var(--color-neutrals-white, #FFFFFF)',
};

/** Texto del banner — IBM Plex Mono SemiBold 14/21, tracking 1%, color #CC4908. */
export const VISTA_DATOS_DETALLE_ALERT_TEXT_STYLE = {
  fontFamily: FONT_FAMILY_MONO,
  fontWeight: 600,
  fontStyle: 'normal',
  fontSize: '14px',
  lineHeight: '21px',
  letterSpacing: '0.01em',
  color: '#CC4908',
  margin: 0,
};

/**
 * @param {string} [message] — Default: «Algunos documentos no pudieron incorporarse».
 */
export const VistaDatosDetalleAlerta = ({
  message = 'Algunos documentos no pudieron incorporarse',
  className = '',
  style,
  textStyle,
  ...props
}) => {
  if (!message || !String(message).trim()) return null;

  return (
    <div
      role="alert"
      className={['anima-vista-datos-detalle-alerta', className].filter(Boolean).join(' ')}
      style={{
        ...VISTA_DATOS_DETALLE_ALERT_STYLE,
        ...(style || {}),
      }}
      {...props}
    >
      <Icon
        name="ExclamationCircleIcon"
        variant="24-outline"
        size={24}
        style={{ flexShrink: 0, color: VISTA_DATOS_DETALLE_ALERT_COLOR }}
        aria-hidden
      />
      <p
        style={{
          ...VISTA_DATOS_DETALLE_ALERT_TEXT_STYLE,
          flex: 1,
          minWidth: 0,
          ...(textStyle || {}),
        }}
      >
        {message}
      </p>
    </div>
  );
};

export default VistaDatosDetalleAlerta;
