'use client';

/**
 * Banner compacto para formulários tipológicos vazios — não esconde o formulário.
 */

import React from 'react';
import { Alert } from 'antd';
import { ProjetoTipologicoSyncCtas } from './ProjetoTipologicoSyncCtas';
import { tipologicoEmptyDescription } from './tipologicoEmptyCopy';

export type ProjetoTipologicoSyncBannerProps = {
    projetoId: string;
    title: string;
    domainDescription: string;
    style?: React.CSSProperties;
    'data-testid'?: string;
};

export function ProjetoTipologicoSyncBanner({
    projetoId,
    title,
    domainDescription,
    style,
    'data-testid': dataTestId = 'projeto-tipologico-sync-banner',
}: ProjetoTipologicoSyncBannerProps) {
    return (
        <Alert
            type="info"
            showIcon
            style={{ marginBottom: 16, ...style }}
            data-testid={dataTestId}
            message={title}
            description={
                <div>
                    <p style={{ margin: '0 0 12px' }}>{tipologicoEmptyDescription(domainDescription)}</p>
                    <ProjetoTipologicoSyncCtas
                        projetoId={projetoId}
                        size="small"
                        data-testid={`${dataTestId}-ctas`}
                    />
                </div>
            }
        />
    );
}