import React from 'react';
import { Button } from '../ui/button';

export interface ThreadListingNoticeProps {
    text: string;
    /** Omitted for a notice that is only informational - "checking" is not a fault to retry. */
    onRetry?: () => void;
    'data-testid'?: string;
}

/**
 * A listing that is not known-complete says so beside the rows it does have, rather than
 * nothing - see `utils/messaging/threadListingNotice.ts`. `role="status"` rather than `alert`:
 * this is not an error interrupting the reader, it is a caveat on what they are already looking at.
 */
export const ThreadListingNotice: React.FC<ThreadListingNoticeProps> = ({ text, onRetry, 'data-testid': testId }) => (
    <div role="status" className="ak-notice ak-notice--sm ahr-thread-listing-notice" data-testid={testId}>
        <p>{text}</p>
        {onRetry && (
            <Button variant="outline" size="sm" onClick={onRetry}>
                Try again
            </Button>
        )}
    </div>
);

export default ThreadListingNotice;