'use client';

import React, { ReactNode } from 'react';
import {
    Table,
} from 'antd';

import styles from './TableScrollWrapper.module.scss';

export interface TableScrollWrapperProps {
  children: ReactNode;
  className?: string;
  style?: React.CSSProperties;
  /** Largura mínima do conteúdo (ativa scroll horizontal em viewports estreitas). */
  minWidth?: number | string;
  /** Listagem inline sem cartão envolvente (§6.2 guia listagens). */
  inlineListagem?: boolean;
  /** Conteúdo opcional abaixo do scroll (ex.: MOB-CH-01 — indicar mais colunas em viewports estreitas). */
  hint?: ReactNode;
}

/**
 * MOB-005: Wrapper para tabelas em listagens. Garante que o scroll horizontal
 * ocorra apenas dentro deste bloco (overflow-x: auto, max-width: 100%),
 * evitando scroll horizontal na página em viewports 320–430px.
 * RESP-028 (R33): Em ultrawide, tabelas ficam dentro do AntLayout .content (max-width 1600px);
 * o scroll horizontal fica contido neste wrapper, sem linhas excessivamente longas na página.
 *
 * Use com <Table scroll={{ x: 'max-content' }} /> (ou valor numérico) dentro.
 */
export function TableScrollWrapper({
  children,
  className,
  style,
  minWidth,
  inlineListagem = false,
  hint: _hint,
}: TableScrollWrapperProps) {
  const mergedClass = [styles.root, inlineListagem && styles.inlineListagem, className]
    .filter(Boolean)
    .join(' ');
  return (
    <div
      className={mergedClass}
      style={{
        overflowX: 'auto',
        maxWidth: '100%',
        minWidth: 0,
        WebkitOverflowScrolling: 'touch',
        ...style,
      }}
    >
      {minWidth != null ? (
        <div style={{ minWidth }}>{children}</div>
      ) : (
        children
      )}
    </div>
  );
}

export default TableScrollWrapper;