'use client';

/**
 * Comparação lado a lado → empilhada no mobile (sync / conflitos / revisão).
 */

import React from 'react';
import { Typography } from 'antd';

import { useIsMobile } from '@/hooks/useIsMobile';
import styles from './SyncComparacaoVertical.module.scss';

export type SyncComparacaoLado = {
    titulo: string;
    corpo: React.ReactNode;
};

export type SyncComparacaoVerticalProps = {
    esquerda: SyncComparacaoLado;
    direita: SyncComparacaoLado;
    /** Força empilhar mesmo no desktop (ex.: preview estreito). */
    forceStack?: boolean;
    className?: string;
    'data-testid'?: string;
};

export function SyncComparacaoVertical({
    esquerda,
    direita,
    forceStack = false,
    className,
    'data-testid': dataTestId = 'sync-comparacao-vertical',
}: SyncComparacaoVerticalProps) {
    const isMobile = useIsMobile();
    const stacked = forceStack || isMobile;

    return (
        <div
            className={[styles.root, stacked ? styles.stacked : styles.sideBySide, className]
                .filter(Boolean)
                .join(' ')}
            data-testid={dataTestId}
            data-layout={stacked ? 'vertical' : 'horizontal'}
        >
            <section className={styles.pane} aria-label={esquerda.titulo}>
                <Typography.Text type="secondary" className={styles.paneTitle}>
                    {esquerda.titulo}
                </Typography.Text>
                <div className={styles.paneBody}>{esquerda.corpo}</div>
            </section>
            <section className={styles.pane} aria-label={direita.titulo}>
                <Typography.Text type="secondary" className={styles.paneTitle}>
                    {direita.titulo}
                </Typography.Text>
                <div className={styles.paneBody}>{direita.corpo}</div>
            </section>
        </div>
    );
}