'use client';

import React from 'react';
import { Spin, Typography } from 'antd';
import type { SpinProps } from 'antd';
import styles from './LoadingState.module.scss';

export interface LoadingStateProps {
    /** Mensagem exibida sob o spinner (ex.: «Carregando projetos…»). */
    label: string;
    /** Tamanho do spinner. Default igual ao do `Spin` do antd, para substituição sem mudar o visual. */
    size?: SpinProps['size'];
    /** Altura mínima reservada, para reduzir salto de layout. */
    minHeight?: number;
    className?: string;
    style?: React.CSSProperties;
}

/**
 * Carregador isolado com rótulo visível.
 *
 * Existe porque o `tip` do `Spin` do antd só é aplicado quando o `Spin` envolve
 * conteúdo ou é `fullscreen`: num `Spin` auto-fechado com `tip` a mensagem nunca
 * chega à tela. Use este componente quando o carregamento ocupa a área toda e
 * não há conteúdo por baixo para envolver; para carregamento sobre conteúdo já
 * renderizado, o padrão aninhado do próprio `Spin` continua correto.
 */
export function LoadingState({
    label,
    size,
    minHeight,
    className = '',
    style,
}: LoadingStateProps) {
    return (
        <div
            className={`${styles.wrapper} ${className}`.trim()}
            style={minHeight != null ? { minHeight, ...style } : style}
            role="status"
            aria-live="polite"
            aria-busy="true"
        >
            <Spin size={size} />
            {/* Typography segue o tema do antd (inclui escuro); o projeto não tem tokens globais. */}
            <Typography.Text type="secondary">{label}</Typography.Text>
        </div>
    );
}

export default LoadingState;