import { useEffect, useRef, useState } from 'react';
import { Document, Page, pdfjs } from 'react-pdf';
import { Icon } from '../../Atoms/Icon/Icon';
import { Typography } from '../../Atoms/Typography/Typography';
import { PrimaryActionButton } from '../../Atoms/PrimaryActionButton/PrimaryActionButton';
import { FONT_FAMILY_MONO, FONT_FAMILY_SANS } from '../../../designTokens';

pdfjs.GlobalWorkerOptions.workerSrc = `https://unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;

const LABEL_STYLE = {
  fontFamily: FONT_FAMILY_SANS,
  fontWeight: 400,
  fontSize: '14px',
  lineHeight: '21px',
  letterSpacing: '0.01em',
  color: '#29474C',
  margin: 0,
};

const INFO_VALUE_STYLE = {
  fontFamily: FONT_FAMILY_SANS,
  fontWeight: 500,
  fontSize: '14px',
  lineHeight: '24px',
  letterSpacing: '0.01em',
  color: '#29474C',
  margin: 0,
};

const LEGAJO_BADGE_BG = '#6D3856';
const POINT_RECIBO_BADGE_BG = '#455DA2';

const MODAL_TITLE_STYLE = {
  fontFamily: FONT_FAMILY_SANS,
  fontWeight: 400,
  fontStyle: 'normal',
  fontSize: '20px',
  lineHeight: '30px',
  letterSpacing: 0,
  color: '#29474C',
  margin: 0,
};

/** Nombre de persona y empresa (header y grilla inferior). */
const PERSONA_EMPRESA_NAME_STYLE = {
  fontSize: '16px',
  lineHeight: '24px',
};

/** Chip header (legajo / recibo) y valor equivalente en grilla inferior. */
const LEGAJO_RECIBO_TEXT_STYLE = {
  fontFamily: FONT_FAMILY_MONO,
  fontWeight: 600,
  fontStyle: 'normal',
  fontSize: '14px',
  lineHeight: '18px',
  letterSpacing: '0.01em',
};

const headerChipStyle = (isPoint) => ({
  background: isPoint ? POINT_RECIBO_BADGE_BG : LEGAJO_BADGE_BG,
  color: '#FFFFFF',
  borderRadius: 6,
  padding: '2px 10px',
  display: 'inline-flex',
  alignItems: 'center',
  ...LEGAJO_RECIBO_TEXT_STYLE,
});

/** Claves de metadata inferior. El consumidor puede pasar un subconjunto en `infoFields`. */
export const VISTA_DOCUMENTO_INFO_FIELD_KEYS = [
  'persona',
  'empresa',
  'legajo',
  'fechaImportacion',
  'periodo',
];

const INFO_FIELD_DEFS = {
  persona: {
    label: 'PERSONA',
    getValue: ({ colaborador }) => colaborador,
    valueStyle: PERSONA_EMPRESA_NAME_STYLE,
  },
  empresa: {
    label: 'EMPRESA',
    getValue: ({ empresa }) => empresa,
    valueStyle: PERSONA_EMPRESA_NAME_STYLE,
  },
  legajo: {
    label: 'N DE LEGAJO',
    getValue: ({ legajo }) => legajo,
    valueStyle: LEGAJO_RECIBO_TEXT_STYLE,
  },
  recibo: {
    label: 'RECIBO',
    getValue: ({ recibo }) => recibo,
    valueStyle: LEGAJO_RECIBO_TEXT_STYLE,
  },
  fechaImportacion: {
    label: 'FECHA DE IMPORTACION',
    getValue: ({ fechaImportacion }) => fechaImportacion,
  },
  periodo: {
    label: 'PERIODO',
    getValue: ({ periodo }) => periodo,
    wide: true,
  },
};

export const VistaDocumento = ({
  isOpen = false,
  onClose,
  onDownload,
  title = 'Contrato de trabajo',
  tagLabel = 'Confidencial',
  headerBadge,
  legajo = 'LEG-1004',
  /** Modo Point: oculta persona, empresa y confidencial en el header; el chip usa `recibo` con fondo #455DA2. */
  point = false,
  /** Valor del chip en header (modo Point). El consumidor la nombra como quiera al mapear datos. */
  recibo = '',
  colaborador = 'Pedro Sanchez Carmona',
  empresa = 'TechCorp Argentina',
  fechaImportacion = '02-08-2026',
  periodo = '2026-08',
  pdfUrl = '',
  closeButtonLabel = 'Cerrar',
  downloadButtonLabel = 'Descargar PDF',
  onDownloadButtonClick,
  downloadButtonProps = {},
  mobileBreakpoint = 768,
  previewTitle = 'Vista previa del PDF',
  previewSubtitle = 'Contrato de trabajo',
  previewDescription = 'El documento se mostraria embebido aqui con scroll interno.',
  previewBackgroundColor = '#FFFFFF',
  previewIconName = 'DocumentTextIcon',
  previewIconColor = '#A7BEC3',
  previewIconSize = 56,
  previewTitleStyle = {},
  previewSubtitleStyle = {},
  previewDescriptionStyle = {},
  forcePreviewError = false,
  showErrorStateOnPreviewFailure = false,
  /** @deprecated No se muestra en UI; usar `previewErrorSubtitle` y `previewErrorDescription`. */
  previewErrorTitle = '',
  previewErrorSubtitle = 'No se puede previsualizar el documento',
  previewErrorDescription =
    'No hay conexión con el servidor o el servicio de documentos no está disponible en este momento.',
  previewErrorRetryLabel = 'Reintentar',
  onPreviewRetry,
  previewRetryButtonProps = {},
  previewErrorIconName = 'FaceFrownIcon',
  previewErrorIconColor = '#6D3856',
  onPreviewLoadError,
  previewErrorContainerStyle = {},
  previewErrorIconSize = 80,
  previewErrorTitleStyle = {},
  previewErrorSubtitleStyle = {},
  previewErrorDescriptionStyle = {},
  pdfToolbarStyle = {},
  pdfToolbarButtonStyle = {},
  pdfViewerContainerStyle = {},
  pdfDocumentContainerStyle = {},
  pdfPageWrapperStyle = {},
  /**
   * Campos a mostrar en la grilla inferior. Si no se envía, se muestran los 5 por defecto (comportamiento original).
   * Si se envía un array, solo aparecen esas claves; el resto no se renderiza.
   */
  infoFields,
}) => {
  const [numPages, setNumPages] = useState(0);
  const [pdfError, setPdfError] = useState(false);
  const [viewerWidth, setViewerWidth] = useState(0);
  const [scale, setScale] = useState(1);
  const [rotation, setRotation] = useState(0);
  const [viewportWidth, setViewportWidth] = useState(
    typeof window !== 'undefined' ? window.innerWidth : 1920
  );
  const viewerRef = useRef(null);

  useEffect(() => {
    if (!isOpen) return undefined;
    const previousOverflow = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => {
      document.body.style.overflow = previousOverflow;
    };
  }, [isOpen]);

  useEffect(() => {
    if (!isOpen || !viewerRef.current || typeof ResizeObserver === 'undefined') return undefined;
    const observer = new ResizeObserver((entries) => {
      const entry = entries[0];
      if (!entry) return;
      setViewerWidth(Math.max(0, Math.floor(entry.contentRect.width - 24)));
    });
    observer.observe(viewerRef.current);
    return () => observer.disconnect();
  }, [isOpen]);

  useEffect(() => {
    if (typeof window === 'undefined') return undefined;
    const handleResize = () => setViewportWidth(window.innerWidth);
    handleResize();
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  useEffect(() => {
    if (!isOpen) {
      setPdfError(false);
      setNumPages(0);
      setScale(1);
      setRotation(0);
    }
  }, [isOpen]);

  if (!isOpen) return null;

  const isPoint = !!point;
  const headerChipText = isPoint ? recibo : legajo;
  const metadataValues = { colaborador, empresa, legajo, recibo, fechaImportacion, periodo };
  const useDefaultInfoFields = infoFields == null;
  const resolvedInfoFields = (
    useDefaultInfoFields
      ? VISTA_DOCUMENTO_INFO_FIELD_KEYS
      : (Array.isArray(infoFields) ? infoFields : VISTA_DOCUMENTO_INFO_FIELD_KEYS)
  ).filter((key) => INFO_FIELD_DEFS[key]);
  const metadataGridColumns = useDefaultInfoFields
    ? 'repeat(4, minmax(0, 1fr))'
    : `repeat(${Math.min(Math.max(resolvedInfoFields.length, 1), 4)}, minmax(0, 1fr))`;

  const isMobile = viewportWidth <= mobileBreakpoint;
  const hasPdf = !!pdfUrl;
  const toolbarButtonStyle = {
    minWidth: 36,
    height: 32,
    padding: '4px 10px',
    borderRadius: 6,
    border: '1px solid #38656D',
    background: '#FFFFFF',
    color: '#38656D',
    cursor: 'pointer',
    fontFamily: FONT_FAMILY_SANS,
    fontWeight: 500,
    fontSize: 14,
    lineHeight: '20px',
    ...pdfToolbarButtonStyle,
  };
  const handleZoomOut = () => setScale((prev) => Math.max(0.5, Number((prev - 0.1).toFixed(2))));
  const handleZoomIn = () => setScale((prev) => Math.min(2, Number((prev + 0.1).toFixed(2))));
  const handleFitToWidth = () => setScale(1);
  const handleRotate = () => setRotation((prev) => (prev + 90) % 360);
  const handleDownload = () => (onDownloadButtonClick ?? onDownload)?.();
  const previewPlaceholder = (
    <div
      style={{
        width: '100%',
        height: '100%',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        textAlign: 'center',
        padding: '12px 16px',
        boxSizing: 'border-box',
      }}
    >
      <Icon name={previewIconName} variant="24-outline" size={previewIconSize} style={{ color: previewIconColor }} />
      <Typography
        component="p"
        style={{
          fontFamily: FONT_FAMILY_SANS,
          fontWeight: 500,
          fontSize: '16px',
          lineHeight: '24px',
          color: '#29474C',
          margin: '12px 0 0',
          letterSpacing: '0px',
          ...previewTitleStyle,
        }}
      >
        {previewTitle}
      </Typography>
      <Typography
        component="p"
        style={{
          fontFamily: FONT_FAMILY_SANS,
          fontWeight: 400,
          fontSize: '16px',
          lineHeight: '19.5px',
          letterSpacing: '0px',
          color: '#29474C',
          margin: '6px 0 0',
          textAlign: 'center',
          ...previewSubtitleStyle,
        }}
      >
        {previewSubtitle}
      </Typography>
      <Typography
        component="p"
        style={{
          fontFamily: FONT_FAMILY_SANS,
          fontWeight: 400,
          fontSize: '16px',
          lineHeight: '18px',
          letterSpacing: '0px',
          color: '#6B7280',
          margin: '8px 0 0',
          textAlign: 'center',
          ...previewDescriptionStyle,
        }}
      >
        {previewDescription}
      </Typography>
    </div>
  );
  const previewErrorState = (
    <div
      style={{
        width: '100%',
        height: '100%',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        textAlign: 'center',
        padding: '16px 20px',
        boxSizing: 'border-box',
        overflowY: 'auto',
        ...previewErrorContainerStyle,
      }}
    >
      <Icon
        name={previewErrorIconName}
        variant="24-outline"
        size={previewErrorIconSize}
        style={{
          color: previewErrorIconColor,
          width: previewErrorIconSize,
          height: previewErrorIconSize,
          opacity: 1,
        }}
      />
      {previewErrorSubtitle ? (
        <Typography
          component="p"
          style={{
            fontFamily: FONT_FAMILY_SANS,
            fontWeight: 500,
            fontSize: '20px',
            lineHeight: '30px',
            letterSpacing: '0px',
            color: '#29474C',
            margin: '10px 0 0',
            textAlign: 'center',
            whiteSpace: 'normal',
            overflowWrap: 'anywhere',
            wordBreak: 'break-word',
            ...previewErrorSubtitleStyle,
            ...previewErrorTitleStyle,
          }}
        >
          {previewErrorSubtitle}
        </Typography>
      ) : null}
      <Typography
        component="p"
        style={{
          fontFamily: FONT_FAMILY_SANS,
          fontWeight: 400,
          fontSize: '16px',
          lineHeight: '24px',
          letterSpacing: '0px',
          color: '#474747',
          margin: '8px 0 0',
          textAlign: 'center',
          maxWidth: 520,
          whiteSpace: 'normal',
          overflowWrap: 'anywhere',
          wordBreak: 'break-word',
          ...previewErrorDescriptionStyle,
        }}
      >
        {previewErrorDescription}
      </Typography>
      <button
        type="button"
        onClick={() => onPreviewRetry?.()}
        {...previewRetryButtonProps}
        style={{
          marginTop: 16,
          padding: '8px 12px',
          height: 37,
          borderRadius: 8,
          border: '1px solid #38656D',
          background: 'transparent',
          display: 'inline-flex',
          alignItems: 'center',
          justifyContent: 'center',
          cursor: 'pointer',
          fontFamily: FONT_FAMILY_SANS,
          fontWeight: 500,
          fontSize: '14px',
          lineHeight: '21px',
          letterSpacing: '0.01em',
          color: '#38656D',
          ...(previewRetryButtonProps?.style || {}),
        }}
      >
        <Icon
          name="ArrowPathIcon"
          variant="24-outline"
          size={20}
          style={{ color: '#38656D', marginRight: 8 }}
        />
        {previewErrorRetryLabel}
      </button>
    </div>
  );

  return (
    <div
      style={{
        position: 'fixed',
        inset: 0,
        zIndex: 1500,
        background: '#00000040',
        display: 'flex',
        alignItems: isMobile ? 'stretch' : 'center',
        justifyContent: 'center',
        padding: isMobile ? 0 : 20,
        boxSizing: 'border-box',
      }}
      onClick={() => onClose?.()}
    >
      <div
        role="dialog"
        aria-modal="true"
        onClick={(event) => event.stopPropagation()}
        style={{
          width: isMobile ? '100%' : 861,
          maxWidth: '100%',
          height: isMobile ? '100%' : 'min(807px, calc(100vh - 40px))',
maxHeight: isMobile ? '100%' : 'calc(100vh - 40px)',
          borderRadius: isMobile ? 0 : 16,
          background: '#FFFFFF',
          border: '1px solid #C4C4C4',
          boxSizing: 'border-box',
          display: 'flex',
          flexDirection: 'column',
          overflow: 'hidden',
        }}
      >
        <div
          style={{
            padding: isMobile ? '12px 10px 8px' : '16px 16px 12px',
            borderBottom: '1px solid #E5E7EB',
            display: 'flex',
            flexDirection: 'column',
            gap: isMobile ? 4 : 8,
          }}
        >
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
            <Typography
              component="h2"
              variant="h6"
              className="anima-vista-documento__title"
              style={MODAL_TITLE_STYLE}
            >
              {title}
            </Typography>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
              {!isMobile && !isPoint && (headerBadge ?? (
                <span
                  style={{
                    height: 28,
                    padding: '4px 12px',
                    borderRadius: 999,
                    border: '1px solid #4C6897',
                    display: 'inline-flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    color: '#4C6897',
                    fontFamily: FONT_FAMILY_SANS,
                    fontWeight: 500,
                    fontSize: 14,
                    lineHeight: '20px',
                  }}
                >
                  {tagLabel}
                </span>
              ))}
              <button
                type="button"
                aria-label="Cerrar modal"
                onClick={() => onClose?.()}
                style={{
                  border: 'none',
                  background: 'transparent',
                  padding: 0,
                  cursor: 'pointer',
                  display: 'inline-flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                }}
              >
                <Icon name="XMarkIcon" variant="24-outline" size={22} style={{ color: '#29474C' }} />
              </button>
            </div>
          </div>

          {isPoint ? (
            headerChipText ? (
              <div style={{ display: 'flex', alignItems: 'center' }}>
                <span style={headerChipStyle(isPoint)}>{headerChipText}</span>
              </div>
            ) : null
          ) : isMobile ? (
            <>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                <Typography
                  component="span"
                  style={{
                    ...LABEL_STYLE,
                    fontWeight: 500,
                    letterSpacing: '0.01em',
                    ...PERSONA_EMPRESA_NAME_STYLE,
                  }}
                >
                  {colaborador}
                </Typography>
                <span style={headerChipStyle(false)}>{legajo}</span>
              </div>
              <Typography
                component="span"
                style={{
                  ...LABEL_STYLE,
                  fontWeight: 400,
                  letterSpacing: '0.01em',
                  ...PERSONA_EMPRESA_NAME_STYLE,
                }}
              >
                {empresa}
              </Typography>
              <div style={{ display: 'flex', justifyContent: 'center', marginTop: 2 }}>
                {headerBadge ?? (
                  <span
                    style={{
                      height: 20,
                      padding: '2px 12px',
                      borderRadius: 999,
                      border: '1px solid #4C6897',
                      display: 'inline-flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      color: '#4C6897',
                      fontFamily: FONT_FAMILY_SANS,
                      fontWeight: 500,
                      fontSize: 12,
                      lineHeight: '16px',
                    }}
                  >
                    {tagLabel}
                  </span>
                )}
              </div>
            </>
          ) : (
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={headerChipStyle(false)}>{legajo}</span>
              <Typography
                component="span"
                style={{
                  ...LABEL_STYLE,
                  fontWeight: 500,
                  letterSpacing: '0.01em',
                  ...PERSONA_EMPRESA_NAME_STYLE,
                }}
              >
                {colaborador}
              </Typography>
              <Typography component="span" style={{ ...LABEL_STYLE, color: '#6B7280' }}>
                ·
              </Typography>
              <Typography
                component="span"
                style={{
                  ...LABEL_STYLE,
                  fontWeight: 400,
                  letterSpacing: '0.01em',
                  ...PERSONA_EMPRESA_NAME_STYLE,
                }}
              >
                {empresa}
              </Typography>
            </div>
          )}
        </div>

        <div
          style={{
            padding: isMobile ? 10 : 16,
            display: 'flex',
            flexDirection: 'column',
            gap: isMobile ? 12 : 16,
            flex: 1,
            minHeight: 0,
            overflowY: 'auto',            background: '#F3F3F3',
          }}
        >
          {hasPdf && !pdfError && (
            <div
              style={{
                border: '1px solid #C4C4C4',
                borderRadius: 8,
                background: '#FFFFFF',
                padding: isMobile ? '8px 10px' : '10px 12px',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                gap: 8,
                flexWrap: 'wrap',
                ...pdfToolbarStyle,
              }}
            >
              <button type="button" aria-label="Reducir zoom" onClick={handleZoomOut} style={toolbarButtonStyle}>
                -
              </button>
              <button type="button" aria-label="Aumentar zoom" onClick={handleZoomIn} style={toolbarButtonStyle}>
                +
              </button>
              <button type="button" onClick={handleFitToWidth} style={toolbarButtonStyle}>
                Ajustar ancho
              </button>
              <span style={{ color: '#A7BEC3', fontFamily: FONT_FAMILY_SANS }}>|</span>
              <Typography component="span" style={LABEL_STYLE}>
                Total paginas: {numPages || '-'}
              </Typography>
              <span style={{ color: '#A7BEC3', fontFamily: FONT_FAMILY_SANS }}>|</span>
              <button type="button" onClick={handleRotate} style={toolbarButtonStyle}>
                Rotar
              </button>
              <span style={{ color: '#A7BEC3', fontFamily: FONT_FAMILY_SANS }}>|</span>
              <button type="button" onClick={handleDownload} style={toolbarButtonStyle}>
                Descargar
              </button>
            </div>
          )}

          <div
            ref={viewerRef}
            style={{
              flex: 1,
              minHeight: isMobile ? 210 : 280,
              border: '1px solid #C4C4C4',
              borderRadius: 8,
              background: previewBackgroundColor,
              overflow: 'auto',
              display: 'flex',
              alignItems: 'stretch',
              justifyContent: 'flex-start',
              padding: 12,
              boxSizing: 'border-box',
              ...pdfViewerContainerStyle,
            }}
          >
            {(forcePreviewError || (showErrorStateOnPreviewFailure && pdfError))
              ? previewErrorState
              : hasPdf && !pdfError ? (
              <div style={{ width: '100%', display: 'flex', justifyContent: 'center', ...pdfDocumentContainerStyle }}>
                <Document
                  file={pdfUrl}
                  loading={previewPlaceholder}
                  onLoadSuccess={({ numPages: pages }) => {
                    setNumPages(pages);
                    setScale(1);
                    setRotation(0);
                    setPdfError(false);
                  }}
                  onLoadError={(error) => {
                    setPdfError(true);
                    onPreviewLoadError?.(error);
                  }}
                >
                  {Array.from({ length: numPages }, (_, index) => (
                    <div
                      key={`pdf-page-${index + 1}`}
                      style={{
                        marginBottom: index === numPages - 1 ? 0 : 16,
                        background: '#FFFFFF',
                        border: '1px solid #E5E7EB',
                        borderRadius: 6,
                        boxShadow: '0 1px 2px rgba(0, 0, 0, 0.08)',
                        padding: 4,
                        boxSizing: 'border-box',
                        ...pdfPageWrapperStyle,
                      }}
                    >
                      <Page
                        pageNumber={index + 1}
                        width={viewerWidth > 0 ? viewerWidth * scale : undefined}
                        rotate={rotation}
                        renderTextLayer={false}
                        renderAnnotationLayer={false}
                      />
                    </div>
                  ))}
                </Document>
              </div>
            ) : hasPdf && pdfError ? (
              <object
                data={pdfUrl}
                type="application/pdf"
                style={{
                  width: '100%',
                  height: '100%',
                  border: 'none',
                  borderRadius: 8,
                  background: '#FFFFFF',
                }}
              >
                <iframe
                  title="Vista previa del PDF"
                  src={pdfUrl}
                  style={{
                    width: '100%',
                    height: '100%',
                    border: 'none',
                    borderRadius: 8,
                    background: '#FFFFFF',
                  }}
                />
              </object>
            ) : previewPlaceholder}
          </div>

          <div
            style={{
              border: '1px solid #C4C4C4',
              borderRadius: 8,
              background: '#FFFFFF',
              padding: isMobile ? '14px 12px' : '16px 18px',
              display: 'grid',
              gridTemplateColumns: isMobile ? '1fr' : metadataGridColumns,
              rowGap: 14,
              columnGap: 16,
            }}
          >
            {resolvedInfoFields.map((fieldKey) => {
              const field = INFO_FIELD_DEFS[fieldKey];
              const useWideColumn =
                !isMobile
                && field.wide
                && (useDefaultInfoFields || resolvedInfoFields.length >= 4)
                && fieldKey === 'periodo';

              return (
                <div
                  key={fieldKey}
                  style={useWideColumn ? { gridColumn: '1 / span 2' } : undefined}
                >
                  <Typography component="p" style={LABEL_STYLE}>
                    {field.label}
                  </Typography>
                  <Typography
                    component="p"
                    style={{
                      ...INFO_VALUE_STYLE,
                      ...(field.valueStyle || {}),
                    }}
                  >
                    {field.getValue(metadataValues)}
                  </Typography>
                </div>
              );
            })}
          </div>
        </div>

        <div
          style={{
            padding: isMobile ? '8px 8px 12px' : '14px 16px',
            borderTop: isMobile ? 'none' : '1px solid #E5E7EB',
            background: isMobile ? '#FFFFFF' : '#FAFAFA',
            display: 'flex',
            flexDirection: isMobile ? 'column-reverse' : 'row',
            justifyContent: 'flex-end',
            alignItems: 'center',
            gap: isMobile ? 8 : 12,
            flexWrap: 'nowrap',
          }}
        >
          <PrimaryActionButton
            variant="outline"
            text={closeButtonLabel}
            onClick={() => onClose?.()}
            style={{
              width: isMobile ? '100%' : 94,
              minWidth: isMobile ? '100%' : 94,
              height: 48,
              marginLeft: 0,
            }}
          />
          <PrimaryActionButton
            variant="primary"
            text={downloadButtonLabel}
            onClick={() => (onDownloadButtonClick ?? onDownload)?.()}
            {...downloadButtonProps}
            style={{
              width: isMobile ? '100%' : 163,
              minWidth: isMobile ? '100%' : 163,
              height: 48,
              marginLeft: 0,
              ...(downloadButtonProps?.style || {}),
            }}
          />
        </div>
      </div>
    </div>
  );
};

export default VistaDocumento;
