const DEFAULT_COPY = Object.freeze({
    empty: {
        message: 'Здесь пока нет данных',
        title: 'Пусто'
    },
    error: {
        message: 'Попробуйте повторить запрос',
        title: 'Не удалось загрузить данные'
    },
    loading: {
        message: 'Это займёт несколько секунд',
        title: 'Загружаем данные'
    }
});

export function AsyncState({ kind = 'loading', message, onRetry, title }) {
    const copy = DEFAULT_COPY[kind] || DEFAULT_COPY.loading;
    const isError = kind === 'error';

    return (
        <section
            className={`ui-state ui-state--${kind}`}
            role={isError ? 'alert' : 'status'}
            aria-live={isError ? 'assertive' : 'polite'}
        >
            <span className="ui-state__signal" aria-hidden="true" />
            <div className="ui-state__content">
                <h2 className="ui-state__title">{title || copy.title}</h2>
                <p className="ui-state__message">{message || copy.message}</p>
            </div>
            {isError && onRetry && (
                <button type="button" className="btn btn-md btn-secondary" onClick={onRetry}>
                    Повторить
                </button>
            )}
        </section>
    );
}