'use client';

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

export type OperativeRouteHintProps = {
    /** Título curto do bloco orientador (ex.: "Próximo passo"). */
    message: string;
    /** Texto que explica o objetivo da rota ou o que fazer a seguir. */
    description: string;
    /** Ações opcionais (ex.: botões com atalhos para rotas relacionadas). */
    children?: React.ReactNode;
    type?: 'info' | 'success' | 'warning';
};

/**
 * Bloco de orientação operacional reutilizável (hierarquia, confiança, CTAs secundários).
 * Usado em rotas densas para reduzir indecisão sem competir com o cabeçalho principal.
 */
export function OperativeRouteHint({
    message,
    description,
    children,
    type = 'info',
}: OperativeRouteHintProps) {
    return (
        <Alert
            type={type}
            showIcon
            style={{ marginBottom: 16 }}
            message={message}
            description={
                <div>
                    <div style={{ marginBottom: children ? 8 : 0 }}>{description}</div>
                    {children ? <div>{children}</div> : null}
                </div>
            }
        />
    );
}