export default function SearchState({
    loading,
    error,
    total,
    retry,
    scope,
    countLabel,
}: {
    loading: boolean;
    error?: string;
    total: number;
    retry: () => void;
    scope?: string;
    countLabel?: string;
}) {
    return (
        <div
            role={error ? 'alert' : 'status'}
            aria-live="polite"
            aria-atomic="true"
            className="my-3 rounded border p-3"
        >
            {scope && <span className="font-medium">{scope}: </span>}
            {loading ? (
                'A pesquisar…'
            ) : error ? (
                <>
                    Não foi possível concluir a pesquisa.{' '}
                    <button type="button" className="underline" onClick={retry}>
                        Tentar novamente
                    </button>
                </>
            ) : total === 0 ? (
                scope ? (
                    'Nenhuma opção encontrada'
                ) : (
                    'Não foram encontrados resultados para esta pesquisa'
                )
            ) : countLabel ? (
                `${total} ${countLabel}`
            ) : scope ? (
                `${total} ${total === 1 ? 'opção disponível' : 'opções disponíveis'}`
            ) : (
                `${total} ${total === 1 ? 'resultado encontrado' : 'resultados encontrados'}`
            )}
        </div>
    );
}